如何在不引入新的空白div的情况下更正UI?

时间:2019-04-26 10:56:12

标签: html css html5 css3 flexbox

以下是我使用Flexbox管理div的代码。为了匹配UI,我放置了一个空白的div,以便第二行项目与上面的项目正确匹配。

  • Box11与Box 01的宽度相同
  • Box12与Box 02的宽度相同
  • 但是第13栏要占宽=第03栏+第04箱
  • Box13中的项目应右对齐。

让我知道我是否可以在不引入虚拟div的情况下实现这一目标,或者有没有更清洁或更有效的方法呢?

代码-

.container { padding: 20px 0;}

.wrong { border: 5px solid red;}
.correct { border: 5px solid green;}

.row { display: flex; padding: 0 1%; margin-bottom: 10px; }

.box { flex: 1; margin: 0 1%; border: 1px solid teal;}

.button-box { display: flex; flex-direction: row-reverse;}
<p>WRONG UI</p>
<div class="container wrong">
  <div class="row">
    <div class="box first">This is a test Box 01</div>
    <div class="box second">This is a test Box 02</div>
    <div class="box third">This is a test Box 03</div>
    <div class="box forth">This is a test Box 04</div>
  </div>
  <div class="row">
    <div class="box first">This is a test Box 11</div>
    <div class="box second">This is a test Box 12</div>
    <div class="box third button-box">
      Box 13
      <button>Button 1</button>
    </div>
  </div>
</div>

<p>CORRECT UI - bcoz of additional div</p>

<div class="container correct">
  <div class="row">
    <div class="box first">This is a test Box 01</div>
    <div class="box second">This is a test Box 02</div>
    <div class="box third">This is a test Box 03</div>
    <div class="box forth">This is a test Box 04</div>
  </div>
  <div class="row">
    <div class="box first">This is a test Box 11</div>
    <div class="box second">This is a test Box 12</div>
    <div class="box second"></div>
    <div class="box third button-box">
      Box 13
      <button>Button 1</button>
    </div>
  </div>
</div>

2 个答案:

答案 0 :(得分:2)

尝试在框13中添加flex: 2;。这将使其与框3和4一样大

答案 1 :(得分:1)

删除不必要的div并更改以下CSS属性

.button-box { display: flex; flex-direction: row-reverse;flex: 2}

.container { padding: 20px 0;}

.correct { border: 5px solid green;}

.row { display: flex; padding: 0 1%; margin-bottom: 10px; }

.box { flex: 1; margin: 0 1%; border: 1px solid teal;}

.button-box { display: flex; flex-direction: row-reverse;flex: 2}
<div class="container correct">
  <div class="row">
    <div class="box first">This is a test Box 01</div>
    <div class="box second">This is a test Box 02</div>
    <div class="box third">This is a test Box 03</div>
    <div class="box forth">This is a test Box 04</div>
  </div>
  <div class="row">
    <div class="box first">This is a test Box 11</div>
    <div class="box second">This is a test Box 12</div>
    <div class="box third button-box">
      Box 13
      <button>Button 1</button>
    </div>
  </div>
</div>