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;对齐容器的末尾，因此您不需要使用{{1} }属性。这是示例代码。希望对您有帮助。

HTML

float

CSS

<div class="outerWrap">
  <div class="innerWrap">
    <div class="smallW"></div>
    <div class="largeW"></div>
    <div class="smallW"></div>
  </div>
</div>

JS小提琴链接：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而不是float。

如何将一组div对齐到右边？

4 个答案: