如何将一组 div 右对齐？

Question

如何将 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">
    &nbsp;
    <div class="smallW"></div>
    <div class="largeW"></div>
    <div class="smallW"></div>
  </div>
</div>

Fiddle here

Answer 1

.innerWrap{
 display: flex;
 flex-direction: row
 justify-content: center
}

你可以使用下面的右对齐

justify-content: flex-end

Answer 2

为此尝试使用 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 Fiddle Link : https://jsfiddle.net/SJ_KIllshot/o7e4cjdL/

Answer 3

您可以使用 innerWrap

中的 flexbox 对齐内容

.innerWrap.center {
    display: flex;
    justify-content: center;
}
.innerWrap.right {
    display: flex;
    justify-content: flex-end;
}

FIDDLE

.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">
        &nbsp;
        <div class="smallW"></div>
        <div class="largeW"></div>
        <div class="smallW"></div>
    </div>
    
    <br>
    
    <div class="innerWrap right">
        &nbsp;
        <div class="smallW"></div>
        <div class="largeW"></div>
        <div class="smallW"></div>
    </div>
</div>

Answer 4

.smallW {
    flex-basis: 10%;
    background-color: green;  
}

.largeW {
    flex-basis: 50%; 
    background-color:blue;  
}

.innerWrap {
  background-color:yellow;
  display:flex;
  justify-content:flex-end;
  height:100px;
}

<div class="outerWrap">
    <div class="innerWrap">
        &nbsp;
        <div class="smallW"></div>
        <div class="largeW"></div>
        <div class="smallW"></div>
    </div>
</div>

使用 Flex 而不是浮动。

如何将一组 div 右对齐？

How to align a set of divs to the right?

html

css

css-float