浮動兩個div標籤，等於100％寬度移動第二個div到新線

我有兩個div標籤，第一個寬度爲80％，第二個寬度爲20％。 80％+ 20％= 100％，但第二個div移動到下一行。

其目標是使用整條線而不移動到第二條。

<!DOCTYPE html> 
<html> 
<head> 
<style> 

.border { 
border-style: dotted; 
} 

</style> 
</head> 
<body> 

<div class="border" style="width: 80%;">thing</div> 
<div class="border" style="width: 20%; float: left;">other thing</div> 

</body> 
</html>

來源

2017-03-28 Roland Warburton

http://stackoverflow.com/questions/11070071/css-width-in-percentage-and-borders –

你可以浮動兩個div到左邊 – VilleKoo

我認爲它是。但我仍然不知道如何保持虛線邊框D： –

試試這個：

CSS代碼：

.table_formate { 
    display:flex; 
    width:100% 
} 
.border { 
    border:1px solid #ddd; 
}

HTML：

<div class="table_formate"> 
    <div class="border" style="width: 80%; float: left; background: #dd0d0d;">thing</div> 
    <div class="border" style="width: 20%; float: left; background: #4abdac;">other thing</div> 
</div>

jsfiddle link

來源

2017-03-28 11:37:44 LKG

嘗試，

<div class="border" style="width: 80%; float: left;">thing</div> 
<div class="border" style="width: 20%; float: left;">other thing</div>

來源

2017-03-28 11:25:36

你需要與你的寬度要考慮你的邊界。邊框增加了寬度，使寬度值增加。你將不得不減少寬度尺寸這是可能的

.border { 
 
    border-style: dotted; 
 
}

<div class="border" style="width: 80%; float: left; background: #dd0d0d;">thing</div> 
 
<div class="border" style="width: 20%; float: left; background: #4abdac;">other thing</div><br> 
 

 
<div style="width: 80%; float: left; background: #dd0d0d;">thing</div> 
 
<div style="width: 20%; float: left; background: #4abdac;">other thing</div><br> 
 

 
<div class="border" style="width: 79%; float: left; background: #dd0d0d;">thing</div> 
 
<div class="border" style="width: 19%; float: left; background: #4abdac;">other thing</div>

來源

2017-03-28 11:28:36

有沒有什麼辦法可以將邊框-1px放在裏面，這樣它就不會計數？ –

你必須記住的是塊級元素，比如div，總是擴展到頁面的左邊和右邊。當您設置寬度時，您將設置內容的寬度，而不是所調用的block context。要做你想做的事情，你需要浮動或重新定位第一個div，所以它不會佔用全部寬度。

另請注意，border超出了內容寬度。你必須記住填充和保證金。在幾乎所有的圖形瀏覽器上都會將邊框添加到正文中，但這不會影響您的問題。

因此，您的寬度設置爲父元素的80％和20％。父元素是主體，所以我們在這裏確定，但你有一個邊框。該邊框使您的內容的總寬度超出正文2px; div元素的每一邊都有一個px。

如果你刪除邊框並浮動第一個div，你將完成你想要的。

作爲一種替代方案，您可以將邊框放入並使您的一個或兩個div元素稍小一些以容納邊框。

要回答你的問題在註釋：

div { width: calc(80% - 2px); }

注意「2px的」，因爲它是對的div元素的每一側的一個像素。維護公式中的空間以使其工作。

編輯：只注意到「點」作爲邊框的寬度大於1px。您需要在公式中設置負值以適應邊框的任何寬度。

來源

2017-03-28 11:48:51 Rob

您可以使用box-sizing:border-box;保持邊境元素的寬度的計數：

見下面摘錄

.border { 
 
    border-style: dotted; 
 
} 
 

 
* { box-sizing: border-box; -webkit-box-sizing: border-box; }

<div class="border" style="width: 80%; float: left; background: #dd0d0d;">thing</div> 
 
<div class="border" style="width: 20%; float: left; background: #4abdac;">other thing</div><br>

來源

2017-03-28 11:50:03

浮動兩個div標籤，等於100％寬度移動第二個div到新線

回答

相關問題