Question

我有三个响应列，我想为这些div添加一个包装div。

我已经创建了这个包装div，但它只适用于像素值，我不想使用像素，因为我试图建立一个响应式布局，如果我可以使用百分比或自动，那将是很好的。

示例：如果我把高度：300px，它可以工作，但如果我使用高度：auto;或身高：30％;它没有用。

我知道它不起作用，因为我使用左浮动。

为什么会这样？还有其他办法吗？

CSS

#offerinformations {
    width: 290px;
    float: left;
    padding: 5px 15px;
}

#offerlogo {
    width: 294px;
    float: left;
    padding: 5px 15px;
    margin: 0px 5px 5px 5px;
}

#offerbtns {
    width: 270px;
    padding: 5px 15px;
    float: left;
}

#offers{
color:white;
background-color: #262627;
border-left: 5px solid #f15c5c;
height: auto;
}

HTML

<div id="offers">
<div id="offerinformations">
        <h2>Informations</h2>
        <p>This page demonstrates a 3 column responsive layout.</p>
    </div>

    <div id="offerlogo">
        <h2>Logo</h2>
        <p>This page demonstrates a 3 column responsive layout.</p>
    </div>

    <div id="offerbtns">
        <h2>Buttons</h2>
        <p>This page demonstrates a 3 column responsive layout.</p>
  </div>
  </div>

Answer 1

您需要在div结束前添加clearer ..

它是一个元素（span，div，p），具有适当的CSS clear:both;

Explanation

为什么＆＃34;身高：自动;＆＃34;当我使用＆＃34; float：left＆＃34;？时不起作用

1 个答案: