左对齐元素宽度的对齐元素

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); 
}