如何将一组div对齐到右边？
如何将一组div对齐到右边？
提问于 2019-06-07 05:21:57
如何将div块移动到a)中心和b)，对吗？也就是说，我希望将innerWrap及其内容移到中间或右边。
.smallW {
width: 10%;
height: 100px;
background-color: green;
float: left;
}
.largeW {
width: 50%;
height: 100px;
background-color: blue;
float: left;
}
.outerWrap {
position: relative;
}
.innerWrap {
background-color: yellow;
width: 100%;
}<div class="outerWrap">
<div class="innerWrap">
<div class="smallW"></div>
<div class="largeW"></div>
<div class="smallW"></div>
</div>
</div>
回答 4
Stack Overflow用户
回答已采纳
发布于 2019-06-07 05:28:06
.innerWrap{
display: flex;
flex-direction: row
justify-content: center
} 您可以使用下面的右对齐。
justify-content: flex-endStack Overflow用户
发布于 2019-06-07 05:31:33
为此尝试使用display: flex。使用float实现对齐要容易得多。
通过使用flex，您可以使用justify-content: center;将内部元素对齐到中心，也可以通过使用justify-content: flex-end;将内部元素对齐到容器的末尾，因此不需要使用float属性。这是一个示例代码。希望它能帮到你。
HTML
<div class="outerWrap">
<div class="innerWrap">
<div class="smallW"></div>
<div class="largeW"></div>
<div class="smallW"></div>
</div>
</div>CSS
.smallW {
width: 10%;
height: 100px;
background-color: green;
}
.largeW {
width: 50%;
height: 100px;
background-color: blue;
}
.outerWrap {
display: flex;
}
.innerWrap {
background-color: yellow;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;/* For center align */
/* justify-content: flex-end; */ /* Align to end */
}JS固定链接：KIllshot/o7e4cjdL/
Stack Overflow用户
发布于 2019-06-07 05:32:28
您可以使用flexbox在innerWrap中对齐内容。
.innerWrap.center {
display: flex;
justify-content: center;
}
.innerWrap.right {
display: flex;
justify-content: flex-end;
}
.smallW {
width: 10%;
height: 100px;
background-color: green;
float:left;
}
.largeW {
width: 50%;
height: 100px;
background-color:blue;
float:left;
}
.outerWrap {
position:relative;
}
.innerWrap {
background-color:yellow;
width:100%;
}
/* additional styles */
.innerWrap.center {
display: flex;
justify-content: center;
}
.innerWrap.right {
display: flex;
justify-content: flex-end;
}<div class="outerWrap">
<div class="innerWrap center">
<div class="smallW"></div>
<div class="largeW"></div>
<div class="smallW"></div>
</div>
<br>
<div class="innerWrap right">
<div class="smallW"></div>
<div class="largeW"></div>
<div class="smallW"></div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56488383
复制相关文章
相似问题
腾讯云开发者
