如何将多个div并排放置在一个独特的布局中

Question

我试图并排放置7个div，但有点独特。 您可以通过链接HERE和查看页面来源查看我目前所做的工作。

我希望Center div的宽度填充 Left Middle 和 Right Middle div之间的空格，而不管浏览器窗体向左或向右拖动多远。目前，中心div左右有白色空间。

有人可以帮帮我吗？

Answer 1

您可以使用<table>来实现它。如果您假装使用基于div的结构，那么您可以使用display:table等来模拟div行为......

这是HTML：

<div style="display:table;width:100%;">
  <div style="display:table-row">

    <div style="display:table-cell;width:100px;background:blue;">Left Fixed</div>
    <div style="display:table-cell;width:auto;background:green;">Left Stretch</div>
    <div style="display:table-cell;width:120px;background:yellow;">Left Middle</div>
    <div style="display:table-cell;width:auto;background:#999;">Center</div>
    <div style="display:table-cell;width:120px;background:yellow;">Right Middle</div>
    <div style="display:table-cell;width:auto;background:green;">Right Stretch</div>
    <div style="display:table-cell;width:100px;background:blue;">Right Fixed</div>

  </div>
</div>

以下是演示：demo link

Answer 2

尝试使用display: inline-block和white-space: nowrap。

的 Demo 的

示例：

<强> HTML

<div class="parent">
  <div class="child">first</div>
   <div class="child2">first2</div>
   <div class="child3">first3</div>
   <div class="child4">first4</div>
   <div class="child5">first5</div>
 <div class="child6">first6</div>
   <div class="child7">first7</div>
</div>

<强> CSS

.parent{
  margin:0 auto;
  background:red;
  font-size:0;
  white-space:nowrap;
}
.child, .child1, .child2, .child3, .child4, .child5, .child6, .child7{
display:inline-block;
  vertical-align:top;
  width:100px;
  padding:20px;
  font-size:12px;
}
.child{
background:green;
}
.child2{
background:rgba(0,0,0,0.4);
}
.child3{
background:rgba(0,0,0,0.6);
}
.child4{
background:rgba(0,0,0,0.1);
}
.child5{
background:rgba(0,0,0,0.3);
}
.child6{
background:rgba(45,234,0,0.9);
}
.child7{
background:rgba(232,0,222,0.9);
}

的 LIve demo 的

Answer 3

你的左边div宽度为45％;你的权利div同样如此。但是中间div的宽度为8％，所以剩下2％。

如果使中心div的宽度为10％，则间隙消失。

Answer 4

<div style="position: relative;">
            <div style="margin-left: auto; margin-right: auto; width: 10%; margin-top: 0px; background-color: #999">
                Center</div>
        </div>

因为你有两个divs宽度加起来为90％而中心div加起来为8％，修复这个并且中心填满了中心

Answer 5

您可以使用HTML <table>毫无问题地实现此目的。或者，如果您希望通过仅使用基于div的结构使其无表格，那么您可以模拟表格的行为，并在CSS中显示为table，table-row，table-cell

Here 是一个现场演示。