自动设置 div 宽度答案

【问题标题】：Automatically set div width自动设置 div 宽度
【发布时间】：2014-09-01 05:24:34
【问题描述】：

我的容器中有三个向左浮动的 div，因此它们都将水平对齐。我希望将下一个包含内容的 div 放在第一行 div 的下方。我的计划是在第一行添加第四个 div 并设置它的宽度，以便它占据第一行的其余部分，从而使下一个 div 在第二行中向下移动。

我尝试将第四个 div（填充 div）的宽度设置为自动，但它不起作用。

【问题讨论】：

[link] (jsfiddle.net/6zyo926f) -- 看看这个小提琴。

标签： html css

【解决方案1】：

我已经改变了你的一些 css

更改了 CSS

#container {
    padding:5px;
    box-sizing:border-box;
}
div {
    margin:0 5px 5px 0;
}
#fourth {
    background-color:#0000FF;
    float:none;
    clear:both;
    width:100%;
    margin-right:0;
}

working JsFiddle File

希望这对你有用。

【讨论】：

【解决方案2】：

尝试将clear:left 添加到第四个div。这会强制它进入一个新行。

【讨论】：

【解决方案3】：

我认为您正在搜索的是元素的百分比宽度。

.myDiv {
   width: 35%;
   float: left;
}

.mySecondDiv {
   width: 65%;
   float: right;
}

因此，您应该记住，任何边距当然会破坏百分比测量元素的对齐方式，因为现在它们正在使用 100% 的屏幕宽度。添加到水平轴的任何边距都会导致.mySecondDiv 下拉。

如果这不是您想要的，请向我们提供您的情况。

编辑：

查看您的 Fiddle 并返回此解决方案： http://jsfiddle.net/6zyo926f/2/

您应该从div 中删除宽度设置，而是像我的示例一样在单独的 div 中使用它。使用 display: inline-block; 可以为您的容器提供您正在寻找的东西。

忘记float。使用三个或更少的元素，它非常有用，但是有了这个，它就不是那么好了。要在 .container 中调整它们，请使用 padding。

【讨论】：