Question

在查看了许多问题之后，我没有找到解决方案，因为我是HTML / Wicket的新手。所以问这个问题：

我有一个父div [div1]。在这2个div内，水平[div2，div3]。

div3在水平方向还包含2个div [div4，div5]。

我想要实现的是：

当div5的文本增加时，则整个div3应该移到div2以下。

有什么解决办法吗？

使用的代码是：

.coverageDetailsOuterAHX span {
  display: inline-block;
  float: none;
  margin-right: 2%;
  width: 319px;
}

.coverageDetailsInnerAHX {
  display: inline-block;
  float: none;
  margin-right: 2%;
}

.coverageDetailsAHX {
  display: inline-block;
  float: none;
  margin-right: 2%;
}

.innerRealCostAHX {
  display: inline-block;
  float: left;
  width: 316px;
}

<div>
  <div class="innerRealCostAHX">
    <a href="http://microsoft.com"> It is microsoft </a>

  </div>

  <div class="coverageDetailsOuterAHX">

    <div class="coverageDetailsInnerAHX">
      <a href="http://google.com"> It is google </a>
    </div>

    <div class="coverageDetailsAHX">
      <a href="http://yahoo.com"> It is Yahooooooooooooooooooooooooooooooooooooooooooooo</a>
    </div>

  </div>

</div>

I want to display "It is google " and "It is Yahoooooooooooo" horizontally 
and below "It is Microsoft".

Answer 1

可以通过display: flex;

完成

.costAHX {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.innerRealCostAHX {
  flex-shrink: 1;
  flex-grow: 1;
  flex-basis: 316px;
}

.coverageDetailsOuterAHX {
  flex-shrink: 1;
  flex-grow: 100;
  flex-basis: 319px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}


/* For presentation purposes */

div {
  border: 1px solid;
  padding: 20px;
  position: relative;
}

div[title]:before {
  content: attr(title);
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(255, 215, 0, 0.5);
  font-size: 10px;
  padding: 3px;
}

<div class="costAHX" title="div1">
  <div class="innerRealCostAHX" title="div2">
    <a href="#"> It is Liliput </a>

  </div>

  <div class="coverageDetailsOuterAHX" title="div3">

    <div class="coverageDetailsInnerAHX" title="div4">
      <a href="#"> It is Brobdingnag </a>
    </div>

    <div class="coverageDetailsAHX" title="div5">
      <a href="#"> It is Luuuuuuuuuuuuuuuuuuggnaaaaaaaaaaaaaaaaaaagg</a>
    </div>

  </div>
</div>

Answer 2

您可以使用display: flex来实现。有关工作示例，请参见下面的代码示例。

 .coverageDetailsOuterAHX{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 500px;
  width: 100%;
}
 
  .coverageDetailsOuterAHX div{
    width: calc(50% - 4px);
    flex-shrink: 0;
    flex-grow: 0;
    display: flex;
        word-break: break-all;
    border: 2px solid red;
  }
    .coverageDetailsOuterAHX div:first-child {
        flex-basis: 100%;
      
      width: 100%;
    }

<div class="coverageDetailsOuterAHX">
  <div> This is short text </div>
  <div> This is long text dsffffffffffffffffffffffffffffasdwerferffsdfsdfwerwerwe </div>
  <div>  This is long text dsffffffffffffffffffffffffffffasdwerferffsdfsdfwerwerwe  </div>

</div>

在HTML / Wicket的下一行中移动整个Div及其内部Div

2 个答案: