定位的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，一個左一個右

回答

相關問題