Question

如何强制显示元素的宽度：table-cell？

<div id="wraper">
  <div id="left">
    <p>Left</p>
  </div>
  <div id="right">
    <p>Right and Hide</p>
  </div>
</div>

我的CSS没有做任何事情，＃left和#righ元素的宽度不受影响。

#wraper {
  display: table-wrap;
}
#left {
  border: 1px solid red;
  display: table-cell;
  width: 30%;
}
#right {
  border: 1px solid blue;
  display: table-cell;
  width 70%;
}

Answer 1

table-wrap不是有效的display值。见MDN

使用display:table。

然后你需要给表一个宽度，以便子元素可以相应地计算它们自己的宽度。

＆＃13;

#wraper {
  display: table;
  width: 70%; /* or your chosen value */
  margin: auto;
}
#left {
  border: 1px solid red;
  display: table-cell;
  width: 30%;
}
#right {
  border: 1px solid blue;
  display: table-cell;
  width 70%;
}

＆＃13;

<div id="wraper">
  <div id="left">
    <p>Left</p>
  </div>
  <div id="right">
    <p>Right and Hide</p>
  </div>
</div>

＆＃13;

Answer 2

它对我来说效果很好 JS小提琴：https://jsfiddle.net/qq0t46pt/1/

HTML：

<div id="wraper">
  <div id="left">
    <p>Left</p>
  </div>
  <div id="right">
    <p>Right and Hide</p>
  </div>
</div>

CSS：

#wraper {
  display: table-wrap;
}
#left {
  border: 1px solid red;
  display: table-cell;
  width: 30%;
}
#right {
  border: 1px solid blue;
  display: table-cell;
  width 70%;
}

HTML table-cell如何设置宽度

2 个答案: