Css 表格单元格和相对宽度

Question

我正在为 CSS 问题苦苦挣扎，希望得到一些帮助。

故事是这样的:
我正在设计一个标题。它分为两个 div。第一个必须是 70% 宽，第二个必须是 30% 宽。为了将它们并排放置，我使用了 css 属性“Display: table-cell”。

div.chapo {
width: 70%;
display: table-cell;
}

div.img_header {
width: 30%;
display: table-cell;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
background-image: url(...);
}

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

Buuuut...当文本很短时，一切都很困惑:

我不明白为什么我的宽度值在这种特定情况下没有保留。
在此先感谢所有愿意帮助我的人...

这是 fiddle 链接: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>