1

我是 CSS 表的新手，这是我的第一次。所以我发现当你设置display:table为一个 div 时，你可能会忘记所有margin和padding（以及任何）你正在计划的未来，因为它们被忽略了。好的。我发现做这项工作的唯一属性是，但与andborder-spacing相比它有点有限。它只有两种样式，水平和垂直。您无法设置想要的边的值或.marginpaddingborder-spacing-leftborder-spacing: 0 1px 2px 3px

就我而言，我有一个表格，其中一行位于屏幕的右上角。我希望它连接在最顶部并水平间隔，这给我带来了问题。顶部还可以，但是当我使用border-spacing: 10px 0.

像我这样的聪明人不认为这是一个问题，因为我们可以将其设置为margin-right负值，使其再次附加到浏览器的右侧。哇，我真是个聪明人！

但是，我在屏幕底部看到了一个该死的滚动条，就像厨房炊具下面的蟑螂一样。我讨厌 roac .. 滚动条特别是水平滚动条，所以我打电话给杀虫剂overflow-x并杀死 .. 将其设置为hidden. 她拼命奔跑，消失不见，但我知道她就在那儿，在某个地方盯着我看。这让我发疯了。

现在是认真的。我认为这不是正确的方法，我希望有人可以教我如何做到这一点。

这是我在小提琴上的场景

提前谢谢你（主要是为了阅读这个废话）。

4

4 回答 4

3

有几种方法可以实现您想要实现的目标。最常见的是，使用display: table,display: table-cell等在列表中并不是很高。

所以，我会这样做：http: //jsfiddle.net/VKnQZ/1/

请记住，我不知道您正在尝试的全部情况，因此很可能我错过了您首先使用表格显示属性的（有效）原因。

你会在这里注意到一些事情：

  • 我已经取消了您的表格显示属性。我认为您不需要它们，并且花车可以很好地完成工作（只要记住清除它们）。
  • 我已将您display从单元格 div 中删除。正如上面评论中的某人指出的那样， div 继承display: bloc默认继承 k 。附加尺寸设置它们的大小，就像您已经拥有的一样。
  • 我正在使用+选择器来输入元素之间的间距。在这种情况下div + div，基本上是“在另一个 div 旁边的每个 div”的简写 - 所以除了第一个之外，它们都是。

希望这可以实现您的目标，并消除所有令人讨厌的 hacky 溢出/边距/等。

这是代码：

HTML（唯一的改变是删除行 div）：

<div id="nav">
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
</div>

CSS：

body {
    padding: 0;
    margin: 0;
}

#nav {
    float: right;
}

#nav div {
    float: left;
    width: 120px;
    height: 40px;
}

#nav div + div{
    margin-left: 10px;
}

.red { background-color:#f00 }
.green { background-color:#0f0 }
.blue { background-color:#00f }
于 2013-06-04T18:33:04.717 回答
1

你能告诉我为什么当你有“table”标签时你试图模仿表格的行为吗？它也可以很好地设计

你正在做的事情有时被称为“divitis”

edit:

你可以绝对定位表http://jsfiddle.net/n83kT/

于 2013-06-04T18:42:19.397 回答
0

不太确定这是否适合讨论浮动和显示 :)
但是，flex 即将到来，并且显示已经非常高效。

显示+方向，您可以将浮动踢走。
边框间距版本： http: //jsfiddle.net/GCyrillus/2EZ3F/
边框左版本：http: //jsfiddle.net/GCyrillus/2EZ3F/1/

<section>
    <div id="nav">
        <div class="red"></div>
        <div class="green"></div>
        <div class="blue"></div>
    </div>
</section>

部分是设置方向 .. 或不
取消设置并重置方向为假浮动，
否则如果您不喜欢此方法，请使用 text-align。
在 CSSheet 中，请注意 inline-table 而不是 table，以便它对 text-align 和/或方向做出反应（并非所有页面都是 EN 或 FR :)） 

body {
    padding: 0;
    margin: 0;
}
section {
    direction:rtl; /* unset regular if you wish, else text-align will do for inline-boxes */
}
#nav {
    direction:ltr;/* reset/set  here if you want cells from left to right */
    display:inline-table;
    border-spacing: 10px 0  ;
}
#nav div {
  /*direction:ltr; reset  here if you want cells from right to left */
    display: table-cell;
    width: 120px;
    height: 40px;
}
#nav div + div {
    margin-left: 10px;
}
.red {
    background-color:#f00
}
.green {
    background-color:#0f0
}
.blue {
    background-color:#00f
}

我的 2 美分（迟到）换了一个不同的观点 :)

于 2013-06-04T19:02:48.000 回答
0

为了完整起见，我想为经常被忽视的inline-block显示类型提供案例。

与浮点数的使用类似，HTML如下：

<div id="nav">
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
</div>

和CSS：

#nav {
    position:absolute;
    top:0;
    right:0;
}

#nav div {
    width: 120px;
    height: 40px;
    display: inline-block;
    vertical-align: bottom;
}

#nav div + div {
    margin-left: 10px;
}

这种inline-block方法的行为类似于 floated-child-div 的方法。

在这个应用程序中，我想不出一个使用另一个的理由。

一个较小的考虑因素是inline-block某些较旧的浏览器不支持该功能。

否则，两种方法都使用相同的标记，并且 CSS 规则同样简单。

选择可能很大程度上取决于您在元素中使用的#nav div内容。

演示小提琴：http: //jsfiddle.net/audetwebdesign/EVJPN/

于 2013-06-04T20:27:36.847 回答