Question

如果不使用CSS更改HTML布局，如何更改div02的位置以使其保持在所有其他div之下？它们都是内联块元素。我宁愿不使用花车。另一方面，定位divs relative / absolute不会推动段落。有没有其他解决办法以相对干净的方式做到这一点？不幸的是，我无法触及HTML。

HTML

<div class="wrap">
  <div class="div01">1</div>
  <div class="div02">2</div>
  <div class="div03">3</div>
  <div class="div04">4</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

CSS

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

.wrap {
  margin: 30px 0 0 30px;
  width: 400px;
  height: 200px;
  border: 1px solid red;
  font-size: 0;
  overflow: auto;   
}

p {
  font-size: 11px;
}

.div01, .div02, .div03, .div04, .div05 {
  font-size: 14px;
  height: 50px;
  width: 50px;
  margin: 0;
  padding: 0;
  border: 1px solid blue;
  display: inline-block;    
}

.div02 {
  width: 150px;   
}

Answer 1

一种方法是，您可以将positon:relative设置为父级，并将position:absolute设置为您要移动的div并相应地设置位置

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
.wrap {
  margin: 30px 0 0 30px;
  width: 400px;
  height: 200px;
  border: 1px solid red;
  font-size: 0;
  overflow: auto;
  position:relative;
}
p {
  font-size: 11px;
}
.div01,
.div02,
.div03,
.div04,
.div05 {
  font-size: 14px;
  height: 50px;
  width: 50px;
  margin: 0;
  padding: 0;
  border: 1px solid blue;
  display: inline-block;
}
.div02 {
  width: 150px;
}
.div02 {
  position: absolute;
  bottom:0px;
  left:0px;
}

<div class="wrap">
  <div class="div01">1</div>
  <div class="div02">2</div>
  <div class="div03">3</div>
  <div class="div04">4</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

在其兄弟姐妹之下移动内联块div

1 个答案: