-2

我垂直有3个div。第一个应该有 100% 的宽度，第二个应该有一个宽度为 283px 的图像，第三个 div 应该有 100% 的宽度。有谁知道如何将图像 div 100% 定位在另外两个 div 的中间？

我试过这个，但不适合我

<div class="content">
<div class="first">1</div>
<div class="third">3</div>
<div class="second">2</div>
</div>

.first{
  width:100%;
  float:left;
  background:yellow;
}
.third{
   width:100%
   float:right;
   background:pink;
}
.second{
   width:283px;
   overflow:hidden;
   background:blue;
}​enter code here
4

3 回答 3

2

如果您的意图是将 div 水平放置在彼此旁边，那么您不能将它们中的任何一个设置为 100% 的宽度，因为彼此相邻的所有元素的总和只能总计 100%。

如果您的网站将是固定宽度，那么您最简单的解决方案是将左右 div 的宽度（以像素为单位）设置为（网站宽度 - 283）/ 2。然后它们将彼此相邻浮动。您也可以使用 %.

但是，如果您的网站是流动宽度，那么您需要计算所有 3 个 div 的百分比，即每个 33%，但这意味着中间不会正好是 283px。

我认为使这项工作完全按照您的意愿工作的唯一方法是在页面加载后使用 Javascript 调整元素的大小，然后可以获取浏览器尺寸并全部解决。

于 2012-12-07T16:04:48.400 回答
0

读了几次之后，我想我得到了你想要做的。

您希望他中间的 div 居中于其他两个 div 之间。

你需要给 div 一个像这样的类：

 .middlediv
 {
    width: 283px;
    margin-left: auto;
    margin-right: auto;
 }

也可以这样写：

 .middlediv
 {
    width: 283px;
    margin: 0px auto;
 }
于 2012-12-07T15:57:23.727 回答
0

你的问题不清楚，所以我做了两种可能的解释：http: //jsfiddle.net/EbBzY/

HTML

<h1>Option 1</h1>
<div class="main">
    <div class="content">
        <div class="first">1</div>
        <div class="second">2</div>
        <div class="third">3</div>
    </div>
</div>

<h1>Option 2</h1>
<div class="content">
    <div class="first">1</div>
    <div class="second">2</div>
    <div class="third">3</div>
</div>

CSS

.main{
    display:table;
    width:100%;
    margin-bottom:100px;
}
.main .content{
    display:table-row;
}
.main .content div{
    display:table-cell;
}

.first{
    background:yellow;
}
.third{
    background:pink;
}
.second{
    background:blue;
    width:283px;
    margin:auto;
}
于 2012-12-07T16:43:57.303 回答