Question

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

我试过这个，但不适合我

<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

Answer 1

如果你的目的是将divs水平放置在彼此旁边，那么你不能将它们中的任何一个设置为100％的宽度，因为彼此相邻的所有元素的总和只能达到100％。

如果您的网站固定宽度超过最简单的解决方案，则将左右div的宽度（以像素为单位）设置为（网站的宽度 - 283）/ 2.然后它们会相互浮动。您也可以使用％。

执行此操作

但是，如果你的网站是流畅的，那么你需要计算所有3个div的百分比，即每个33％，但这意味着中间不会是283px。

我能想到的唯一方法就是在页面加载后使用Javascript来调整元素的大小，这样就可以获得浏览器的尺寸并全力以赴。

Answer 2

阅读了几次，我想我得到了你想做的事。

你希望他的中间div在另外两个div之间居中。

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

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

也可以这样写：

 .middlediv
 {
    width: 283px;
    margin: 0px auto;
 }

Answer 3

您的问题不明确，所以我做了两种可能的解释：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;
}

将div放在另外两个之间

3 个答案: