Css表格单元格和相对宽度

Question

我正在努力解决CSS问题，我希望得到一些帮助。

这里的故事：
我正在设计一个标题。它分为两个div。第一个必须是70％宽，第二个必须是30％宽。我使用了css-property＆＃34; Display：table-cell＆＃34;为了将它们并排放置。

public void deleteDirectPaymentLine(DirectPaymentLine dpl) {
    linkedHashSet.remove(dpl);
    directPaymentLineList.remove(dpl);
    //directPayment.setDirectPaymentLineSet(linkedHashSet);
    directPaymentService.deleteDirectPaymentLine(directPayment, dpl);
    if (hasCoinsurance) {
        directPaymentService.recalculateTotalHundredPercentAmount(directPayment);
    }
}

当放在第一个div中的文本足够长时，它工作正常：

Buuuut ......当文字很短时，一切都很混乱：

我无法弄清楚为什么我的宽度值不会保留在这种特定情况下。
提前感谢所有善意帮助我的人......

这里是小提琴链接：https://jsfiddle.net/vinny38/verucw8p/3/

Answer 1

我将div ce_text chapo和img_header包裹到.test-wrap类并将其提供给css下面：

.test-wrap {
 display: table;
 width: 100%;
}

body,
div {
  margin: 0;
  padding: 0;
  font-family: 'Roboto condensed', sans-serif;
}

div.inside {
  position: relative;
}

div.chapo {
  background-color: #ef4056;
  background-image: none;
  width: 70%;
  height: 255px;
  display: table-cell;
  vertical-align: top;
  background-color: #aaa;
  color: #fff;
  padding: 20px 8%;
  position: relative;
}

h1 {
  margin-top: 0;
  font: 1.4em 'Oswald', Helvetica, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
}

div.chapo p {
  width: 100%;
  min-width: 100%;
  position: relative;
  padding: 0;
  font-size: 1em;
  font-weight: 300;
}

div.img_header {
  width: 30%;
  position: relative;
  display: table-cell;
  vertical-align: top;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  background-image: url(https://image.freepik.com/free-psd/abstract-background-design_1297-73.jpg);
}

div.mod_breadcrumb {
  height: 40px;
  margin: 0;
  padding-top: 5px;
  padding-right: 30px;
  padding-bottom: 5px;
  background-color: #e3e3e3;
  padding-left: 8%;
}

.mod_breadcrumb ul li {
  height: 30px;
  display: inline-block;
  padding: 3px 0;
  color: #828282;
}
.test-wrap {
  display: table;
  width: 100%;
}

<div class="inside">
  <div class="test-wrap">
    <div class="ce_text chapo">
      <h1>My header</h1>
      <div class='text-chapo'>
        <p>Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetur adipiscing </p>
      </div>
    </div>
    <div class="img_header"></div>
  </div>
  <div class="mod_breadcrumb block">
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

Answer 2

这个CSS没关系......'float：left'选项和相对宽度不同。  在这里，我计算了总宽度左右两边的填充。浮动是水平对齐所必需的。

body,
div {
  margin: 0;
  padding: 0;
  font-family: 'Roboto condensed', sans-serif;

}

div.inside {
  position: relative;
}

div.chapo {
      background-image: none;
    width: 50%;
    height: 255px;
    vertical-align: top;
    background-color: #aaa;
    color: #fff;
    padding: 20px 10%;
    position: relative;
    float: left;

}

h1 {
  margin-top: 0;
  font: 1.4em 'Oswald', Helvetica, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
}

div.chapo p {
  width: 100%;
  position: relative;
  padding: 0;
  font-size: 1em;
  font-weight: 300;
}

div.img_header {
     width: 30%;
    position: relative;
    height: 295px;
    vertical-align: top;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    float: left;
    -webkit-background-size: cover;
    background-image: url(https://image.freepik.com/free-psd/abstract-background-design_1297-73.jpg);
}

div.mod_breadcrumb {
  height: 40px;
  margin: 0;
  padding-top: 5px;
  padding-right: 2%;
  padding-bottom: 5px;
  background-color: #e3e3e3;
  padding-left: 8%;
  float:left;
  width:90%;
}

.mod_breadcrumb ul li {
  height: 30px;
  display: inline-block;
  padding: 3px 0;
  color: #828282;

}

Answer 3

试试这样： 您必须定义float属性，并且必须为height:255px类定义img_header（对于您给出高度为255px的另一个div）。这是非常必要的。

＆＃13;

＆＃13;

body,
div {
  margin: 0;
  padding: 0;
  font-family: 'Roboto condensed', sans-serif;
  box-sizing: border-box
}

div.inside {
  position: relative;
}

div.chapo {
  background-color: #ef4056;
  background-image: none;
  width: 70%;
  float:left;
  height: 255px;
  display: table-cell;
  vertical-align: top;
  background-color: #aaa;
  color: #fff;
  padding: 20px 8%;
  position: relative;
}

h1 {
  margin-top: 0;
  font: 1.4em 'Oswald', Helvetica, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
}

div.chapo p {
  width: 100%;
  min-width: 100%;
  position: relative;
  padding: 0;
  font-size: 1em;
  font-weight: 300;
}
.clearfix {
  clear:both;
}
.img_header {
  width: 30%;
height: 255px;
  float: right;
  position: relative;
  display: table-cell;
  vertical-align: top;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  background-image: url(https://image.freepik.com/free-psd/abstract-background-design_1297-73.jpg);
}

div.mod_breadcrumb {
  height: 40px;
  margin: 0;
  padding-top: 5px;
  padding-right: 30px;
  padding-bottom: 5px;
  background-color: #e3e3e3;
  padding-left: 8%;
}

.mod_breadcrumb ul li {
  height: 30px;
  display: inline-block;
  padding: 3px 0;
  color: #828282;
}

＆＃13;

<div class="inside">
  <div class="ce_text chapo">
    
    <div class='text-chapo'>
    <h1>My header</h1>
      <p>Lorem </p>
      <p>Aliquam porttitor.</p>
    </div>
  </div>
  
  <div class="img_header"></div>
  
  <div class="mod_breadcrumb block">
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>
<div class="clearfix"></div>

＆＃13;

＆＃13;

＆＃13;