Question

我有一个div，其中有两个div，里面有float：left;属性。我想进入下一个div的新行。

我试图把宽度：100％;在两个div中但没有任何改变。

这是我的代码：

HTML

<div style="width: 100%;">
<div class="img-head">
    <img src="/nutickets2/images/evento-1.png">
</div>
<div class="text-head-div">
    <span class="text-head">HYPER Festival LAUNCH PARTY</span><br><br><br>

        <table class="table-1">
            <tr>
                <th>Name:</th>
                <td>Bill Gates</td>
                <th>Name:</th>
                <td>Steve Jobs</td>
            </tr>
            <tr>
                <th>Telephone:</th>
                <td>55577854</td>
                <th>Telephone:</th>
                <td>55577854</td>
            </tr>
        </table>
</div>
</div>

<div style="width: 100;">
    <div>NEXT DIV TESTTTTTTT</div>
</div>

CSS

.img-head {
    float: left;
    margin: 10px;
}

.text-head-div {
    float: left;
    margin-top: 35px;
    margin-left: 20px;
}

.text-head {
    color: #0099cc;
}

.text-head-1 {
    color: #000000;
}

.text-head-2 {
    color: #000000;
}

.table-1 th, td {
    text-align: left;
    padding: 19px;
}

Answer 1

使用clear:both;。这将迫使元素下降。另请注意，当您指定width属性时，必须提及单位。

<div style="width:100px; clear:both;">
    <div>NEXT DIV TESTTTTTTT</div>
</div>

Answer 2

将clear: left添加到第二个DIV，这足够了（它会中断浮动）

Answer 3

试试这个

.img-head {
    float: left;
    margin: 10px;
}

.text-head-div {
    float: left;
    margin-top: 35px;
    margin-left: 20px;
}

.text-head {
    color: #0099cc;
}

.text-head-1 {
    color: #000000;
}

.text-head-2 {
    color: #000000;
}

.table-1 th, td {
    text-align: left;
    padding: 19px;
}
.first:after {
  content: "";
  display: block;
  clear: both;
}

<div class="first" style="width: 100%;">
<div class="img-head">
    <img src="/nutickets2/images/evento-1.png">
</div>
<div class="text-head-div">
    <span class="text-head">HYPER Festival LAUNCH PARTY</span><br><br><br>

        <table class="table-1">
            <tr>
                <th>Name:</th>
                <td>Bill Gates</td>
                <th>Name:</th>
                <td>Steve Jobs</td>
            </tr>
            <tr>
                <th>Telephone:</th>
                <td>55577854</td>
                <th>Telephone:</th>
                <td>55577854</td>
            </tr>
        </table>
</div>
</div>

<div class="next">
    <div>NEXT DIV TESTTTTTTT</div>
</div>

在DIV之后，在左侧浮动时，在下面的行中创建DIV

3 个答案: