Css Table-cell 和相对宽度

Question

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

故事是这样的：
我正在设计 header。它分为两个 div。第一个必须是 70% 宽，第二个必须是 30% 宽。我使用了 css-property "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 link：https://jsfiddle.net/vinny38/verucw8p/3/

Answer 1

这个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 2

我把 div ce_text chapo 和 img_header 都包装到 .test-wrap class 并给下面的 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 3

像这样尝试：你必须定义 float 属性以及你必须定义 height:255px （至于另一个 div 你给你的高度 255px ）为你的 img_header class。真的很有必要。

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;
}

<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>

Css Table-cell 和相对宽度

Css Table-cell and relative width

css

display

tablecell