在另外两个人之间定位div

-2

我有3个垂直div。第一个应该有100％的宽度，第二个应该有一个宽度为283px的图像，第三个div应该有100％的宽度。有谁知道如何在另外两个div中间定位图像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

来源

2012-12-07 Danilo Siqueira

你可以张贴一些代码？ –

为什么不把它做成100％，然后使用'text-align：center'来集中图像？ –

那么你想要他们并排，还是一个在另一个之上？ –

如果你的目的是要定位彼此相邻的div水平比你不能把它们中的任何一个设置为100％的宽度，因为相邻的所有元素的总数只能达到100％。

如果你的网站的宽度比你的最简单的解决方案是将左右div的宽度设置为像素的宽度（网站的宽度-283）/ 2，那么它们会漂浮在一起。你也可以用％来做到这一点。

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

我能想到的完全按照你想要的方式工作的唯一方法就是在页面加载之后使用Javascript调整元素的大小，然后可以获得浏览器维度并全部处理。

来源

2012-12-07 16:04:48 ProWebMonkey

读完了几次，我想我得到你想要做什么。

你想要他的中间div位于其他两个div之间。

你需要给股利一类是这样的：

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

这也可以写成这样：

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

来源

2012-12-07 15:57:23

你的问题是不明确的，所以我做了两种可能的解释：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-07 16:43:57 Shmiddty

在另外两个人之间定位div

回答

相关问题