在一个div中分隔两个/树div？

Question

我需要一些关于如何编写HTML代码的帮助。目前我有一个html文件，用div命名为“main.html”，我从另一个html文件（在本例中为“faq_contact.html”）上传内容。

如何构建HTML以获得与此页面上的Nespresso相似的结构：

我希望顶部的盒子有“Contact Nespresso”和下面的两个。 我尝试使用“检查页面源”来查看代码，但可以找到任何内容。

Answer 1

将%中的宽度添加到两个div中，使得总和小于100. float左边一个div而另一个右边。

＆＃13;

＆＃13;

#heading {
  background-color: #ddd;
}

#main-div {
  background-color: #eee;
  float:left;
}

#side-div {
  background-color: #ccc;
  float:right;
}

.row {
  width: 100%;
}

.col-75 {
  width: 75%;
}

.col-20 {
  width: 20%;
}

＆＃13;

<div class="row" id="heading">HEADING</div>
<br>
<div class="col-75" id="main-div">Main Div</div>
<div class="col-20" id="side-div">Side Div</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我制作了一个div并在外部div中包含了3个div s。然后我将第一个内部div的高度分配为100％，将另外两个内部div的高度分配为50％（您可以根据需要进行调整）。然后我将第一个div设置为display: inline和width: 70%，并且我将div浮动到左边，然后我用{设置另外两个div {1}}我设置了其他两个display: inline-block的宽度，使它们看起来与第一个div相邻。请参阅下面的代码。

div

Answer 3

如果您的内容位于单独的文件中，则可以使用iframe：

<div>
    <h1>Contact Nespresso</h1>
</div>
<iframe src="~/leftcontent.html" style="float:left; width:75%"></iframe>
<iframe src="~/rightcontent.html" style="float:right; width:25%"></iframe>

如果你正在生成内容并且很高兴使用Twitter引导程序，你可以这样做：

<div class="col-md-12">
    <h1>Contact Nespresso</h1>
</div>
<div class="col-md-8">left content</div>
<div class="col-md-4">right content</div>

在这两种情况下，您都需要添加一些造型和放大器。不应该使用内联css，以此为例。

如果你想上学，你可以使用一张桌子：

<table>
    <tr>
        <td colspan="2">
            <h1>Contact Nespresso</h1>
        </td>
    </tr>
    <tr>
        <td style="width: 75%;">left content</td>
        <td style="width: 25%;">right content</td>
    </tr>
</table>

但是，这并不是推荐的做法，因为它没有响应。