将div调整到身体的左侧和另一个具有自动保证金的div

我希望我的ad div完全位于身体的左侧和middle div之间。我将如何实现这一目标？将div调整到身体的左侧和另一个具有自动保证金的div

body { 
 
border: 1px solid black; \t 
 
} 
 
#middle { 
 
border: 1px solid black; \t \t \t 
 
margin: auto; \t \t 
 
width: 50px; 
 
height: 100px; \t 
 
} \t 
 
#ad { 
 
border: 1px solid black; 
 
float: left; \t \t \t \t 
 
width: 50px; 
 
height: 100px; \t 
 
}

<div id = "ad"> ad </div> 
 
<div id = "middle"> middle </div>

来源

2015-12-03 frosty

你是什么意思“完全在”之间？恐怕你需要指定你想要的确切布局。 – Joy

@Joy我的意思是带有自动边距的广告div，位于身体的左侧和中心div之间。 – frosty

问题是，你的'margin：auto'被定位在其他元素（你的父元素）。你可以做到这一点，但它会是hacky ......更好地定义无相关尺寸或在这里使用一种响应式设计 – messerbill

您可以flexbox实现这一布局，一种无形的柔性相结合的项目auto margins。

HTML

<div class="box ad"> ad </div> 
<div class="box middle"> middle </div> 
<div class="box invisible"> right </div><!-- invisible -->

CSS

body { 
    display: flex; 
    border: 1px solid black; 
} 

.box { 
    width: 50px; 
    height: 100px; 
    border: 1px solid black; 
} 

.invisible { margin-left: auto; margin-right: auto; visibility: hidden; } 
.middle { margin-left: auto; } 
.ad  { margin-left: auto; }

DEMO

注意Flexbox将被所有主流浏览器，支持except IE 8 & 9。一些最新的浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加所需的所有前缀，请在左侧面板中发布您的CSS：Autoprefixer。

来源

2015-12-03 03:10:59

将div调整到身体的左侧和另一个具有自动保证金的div

回答

相关问题