左對齊元素寬度的對齊元素

Question

我需要對齊.element的寬度等於總寬度數.block1左浮動元素。對於不同的屏幕，在一行中安裝的.block1左側浮動元素的數量將會不同，它們的總寬度也會不同。那麼我應該如何調整元素？

.block1 { 
 
    width: 300px; 
 
    float: left; 
 
    background: #ccc; 
 
    margin: 10px; 
 
    padding: 10px; 
 
} 
 

 
.wrapper { 
 
    display: table; 
 
} 
 

 
.element { 
 
    float: right; 
 
    color: #fff; 
 
    background: #000; 
 
    padding: 10px; 
 
} 
 

 
.clear { 
 
    clear: both; 
 
} 
 

 
.left { 
 
    float: left; 
 
}

<div class="wrapper"> 
 
    <h1 class="left">My Title</h1> 
 
    <div class="element">Element</div> 
 

 
    <div class="clear"></div> 
 

 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
</div>

的.element是正確的靠近瀏覽器的右邊框浮動，但我需要的.element屹立在打印屏幕上的位置不同的屏幕寬度：

Answer 1

你必須把你的所有.block1元素共同的父容器內，如果你想達到什麼您使用media-queries來改變你的.parent的width與屏幕尺寸在這裏做。

參考代碼：

.block1 { 
 
    width: 300px; 
 
    float: left; 
 
    background: #ccc; 
 
    margin: 10px; 
 
    padding: 10px; 
 
} 
 

 
.wrapper { 
 
    display: table; 
 
} 
 

 
.element { 
 
    float: right; 
 
    color: #fff; 
 
    background: #000; 
 
    padding: 10px; 
 
} 
 

 
.clear { 
 
    clear: both; 
 
} 
 

 
.left { 
 
    float: left; 
 
} 
 

 
@media only screen and (max-width: 679px) { 
 
    .parent { 
 
    width: 330px; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 680px) and (max-width: 980px) { 
 
    .parent { 
 
    width: 680px; 
 
    } 
 
}

<div class="wrapper"> 
 
    <h1 class="left">My Title</h1> 
 
    <div class="element">Element</div> 
 
    <div class="parent"> 
 
    <div class="clear"></div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    </div> 
 
</div>

Answer 2

.wrapper { 
    display: table; 
    width:1020px; 
} 

你可以給寬度父母div即包裝

Answer 3

您可以使用下面的CSS此

.block1 { 
    display: inline-block; 
    vertical-align: top; 
    width: calc(33% - 20px); 
}