Question

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

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

Answer 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

希望这对你有用。

Answer 2

我认为你要搜索的是元素的宽度百分比。

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

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

有了这个，你应该记住，任何边际当然会打破百分比测量元素的对齐，因为现在他们使用100％的屏幕宽度。添加到水平轴的任何边距都会导致.mySecondDiv下拉。

如果这不是您正在寻找的，请向我们提供您的情况。

修改

看看你的小提琴并回来了这个解决方案： http://jsfiddle.net/6zyo926f/2/

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

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

Answer 3

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

自动设置div宽度

3 个答案: