1

我试图并排放置 7 个 div，但有点独特。您可以通过此处的链接查看我到目前为止所做的工作并查看页面源代码。

我希望中心 div 的宽度填充左中和右中div 之间的空间，无论将浏览器表单向左或向右拖动多远。目前，中心 div 的左侧和右侧都有空格。

谁能帮帮我？

4

5 回答 5

2

您可以使用<table>. 如果您假装使用基于 div 的结构，那么您可以使用display:tableetc 来模拟 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>

这是一个演示：演示链接

于 2012-09-14T08:20:01.797 回答
1

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

演示

例子：

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);
}

现场演示

于 2012-09-14T08:36:32.157 回答
0

您可以使用 HTML 毫无问题地实现这一点<table>。或者如果你想让它没有表格，只使用基于 div 的结构，那么你可以在你的 CSS 中使用display as table,来模拟表格的行为table-rowtable-cell

这是一个现场演示。

于 2012-09-14T08:07:23.093 回答
0

你左边的 div 有 45% 的宽度；你的右 div 类似。但是中间的 div 有 8% 的宽度，所以还剩下 2%。

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

于 2012-09-14T08:00:22.800 回答
0 
<div style="position: relative;">
            <div style="margin-left: auto; margin-right: auto; width: 10%; margin-top: 0px; background-color: #999">
                Center</div>
        </div>

因为你有两个 div 的宽度加起来为 90%，而中心 div 为 8%，所以修复这个并且中心填充中心

于 2012-09-14T08:00:55.843 回答