定位的div，一个左一个右

我有我的网站之一下面的代码：定位的div，一个左一个右

body { 
 
    width: 1020px; 
 
    margin: 0 auto; 
 
} 
 

 
.box { 
 
    width: 500px; 
 
    float: left; 
 
} 
 

 
.clear { 
 
    clear: both; 
 
    height: 0; 
 
    font-size: 1px; 
 
    line-height: 0; 
 
}

<body> 
 

 
    <p>Headline</p> 
 
    <div class="box">content</div> 
 
    <div class="box">content</div> 
 
    <div class="box">content</div> 
 
    <div class="clear"></div> 
 

 
    <p>Headline</p> 
 
    <div class="box">content</div> 
 
    <div class="box">content</div> 
 
    <div class="clear"></div> 
 

 
    <p>Headline</p> 
 
    <div class="box">content</div> 
 
    <div class="box">content</div> 
 
    <div class="box">content</div> 
 
    <div class="clear"></div> 
 

 
</body>

我想的10px的保证金右添加到每个盒子div位于左侧，以便两个div彼此相邻。

我试图解决这个问题：nth-child（）但它不会工作，因为有其他元素，如p标签和中间的清除元素。

有没有办法用css来解决这个问题？

我不能改变结构或元素的类型！

来源

2017-10-21 Dennis

可以更改HTML？它不会影响视觉效果，但它会使解决问题更容易。 –

这是一个现有网站的重新设计，这意味着它是可能的，但它会是很多额外的工作。我需要改变什么？ – Dennis

如果只有你可以为三个块中的每一块创建一个容器，你可以使用'n-type-type（）'轻松解决这个问题。 – jfeferman

你的HTML是没有帮助。理想情况下，你将有一个div包装所有的div与类.box。喜欢的东西：

.boxesWrapper { 
 
    display: flex; 
 
    justify-content: flex-start; 
 
    flex-wrap: wrap; 
 
} 
 

 
.box{ 
 
    border: 1px dotted black; 
 
    margin-right: 10px; 
 
    width: 100px; 
 
}

<body> 
 

 
    <p>Headline</p> 
 
    <div class="boxesWrapper"> 
 
    <div class="box">content</div> 
 
    <div class="box">content</div> 
 
    <div class="box">content</div> 
 
    </div> 
 
    <p>Headline</p> 
 
    <div class="boxesWrapper"> 
 
    <div class="box">content</div> 
 
    <div class="box">content</div> 
 
    </div> 
 

 
    <p>Headline</p> 
 
    <div class="boxesWrapper"> 
 
    <div class="box">content</div> 
 
    <div class="box">content</div> 
 
    <div class="box">content</div> 
 
    </div> 
 

 
</body>

来源

2017-10-21 01:53:30

这是完美的。非常感谢。 – Dennis

您可以通过使用nth-of-type()选择解决它，如果你可以添加一个container每组各地：

body { 
 
    width: 1020px; 
 
    margin: 0 auto; 
 
} 
 

 
.box { 
 
    width: 500px; 
 
    float: left; 
 
    background: red; 
 
} 
 

 
.container div.box:nth-of-type(odd) { 
 
    margin-right: 10px; 
 
} 
 

 
.clear { 
 
    clear: both; 
 
    height: 0; 
 
    font-size: 1px; 
 
    line-height: 0; 
 
}

<body> 
 

 
    <div class="container"> 
 
    <p>Headline</p> 
 
    <div class="box">content</div> 
 
    <div class="box">content</div> 
 
    <div class="box">content</div> 
 
    <div class="clear"></div> 
 
    </div> 
 

 
    <div class="container"> 
 
    <p>Headline</p> 
 
    <div class="box">content</div> 
 
    <div class="box">content</div> 
 
    <div class="clear"></div> 
 
    </div> 
 

 
    <div class="container"> 
 
    <p>Headline</p> 
 
    <div class="box">content</div> 
 
    <div class="box">content</div> 
 
    <div class="box">content</div> 
 
    <div class="clear"></div> 
 
    </div> 
 

 
</body>

来源

2017-10-21 01:48:45 jfeferman

定位的div，一个左一个右

回答

相关问题