如何在CSS显示器中制作2个单元格：表行占行的50％？
[英]How can I make 2 cells inside a CSS display: table-row occupy 50% of the row?
问题描述
我有以下HTML：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="def" style="margin-bottom: 4rem; margin-left: auto; margin-right: auto; margin-top: 7.25rem; width: 90%;">
<div id="abc" style="display: table-row; width: 100%;">
<div style="width: 50%; height: 20px; background-color: green;">
I want this to fill almost 45% of the width of the screen
</div>
<div style="width: 50%; height: 20px; background-color: red;">
I want this to fill almost 45% of the width of the screen
</div>
</div>
</div>
</body>
</html>
我在上面尝试了此代码，但似乎表行中的DIV的宽度没有扩大。 如果可能的话，我想在id为abc的div中解决，因为我无法更改div def的样式
4 个解决方案
解决方案1
0 2014-08-18 10:19:25
利用float资产
<div id="def" style="margin-bottom: 4rem; margin-left: auto; margin-right: auto; margin-top: 7.25rem; width: 90%;">
<div id="abc" style="display: table-row; width: 100%;">
<div style="width: 50%; height: 20px; background-color: green; float:left">
I want this to fill almost 45% of the width of the screen
</div>
<div style="width: 50%; height: 20px; background-color: red; float:right">
I want this to fill almost 45% of the width of the screen
</div>
</div>
</div>
解决方案2
0 2014-08-18 10:21:26
非常简单，如果您想创建一个类似表格的结构，请使用display: table-cell; 在div上：
<div id="def" style="margin-bottom: 4rem; margin-left: auto; margin-right: auto; margin-top: 7.25rem; width: 90%; display: table;">
<div id="abc" style="display: table-row; width: 100%;">
<div style="display: table-cell; width: 50%; height: 20px; background-color: green;">
I want this to fill almost 45% of the width of the screen
</div>
<div style="display: table-cell; width: 50%; height: 20px; background-color: red;">
I want this to fill almost 45% of the width of the screen
</div>
</div>
</div>
您也可以使用float: left; ，但由于它已经是显示的表格，因此您不妨继续这样做。
编辑：为了完成，我添加了一个display: table; 到#def div。
您会看到一个小提琴 。 正如其他人所说的那样，最好将CSS与HTML分开，就像我在小提琴中所做的那样。
解决方案3
0 已采纳 2014-08-18 10:22:10
您可以执行以下操作以获得所需的结果
的CSS
.container {
margin-bottom: 4rem;
margin-left: auto;
margin-right: auto;
margin-top: 7.25rem;
width: 90%;
border:2px solid;
background:yellow;
}
.subcontainer {
display: table-row;
width: 100%;
}
.first {
width: 50%;
height: 20px;
background-color: green;
float:left;/***Use This***/
}
.second {
width: 50%;
height: 20px;
background-color: red;
float:right;/***Use This***/
}
或者您可以使用表格单元
.first {
width: 50%;
height: 20px;
background-color: green;
display:table-cell;/***Use This***/
}
.second {
width: 50%;
height: 20px;
background-color: red;
display:table-cell;/***Use This***/
}
编辑：总是最好单独编写CSS
解决方案4
0 2014-08-18 10:23:45
您需要display: table-cell; 在table-row内的div上。
像这样：
<div id="def" style="margin-bottom: 4rem; margin-left: auto; margin-right: auto; margin-top: 7.25rem; width: 90%;">
<div id="abc" style="display: table-row; width: 100%;">
<div style="width: 50%; height: 20px; background-color: green; display:table-cell">
I want this to fill almost 45% of the width of the screen
</div>
<div style="width: 50%; height: 20px; background-color: red; display:table-cell">
I want this to fill almost 45% of the width of the screen
</div>
</div>
</div>
浮动也可以（对于支持旧IE的情况更好），但display: table-cell; 更符合您的工作。
是否使第二个表行中的单元格宽度等于第一个表行中的单元格宽度？
[英]Make the width of cells in the second table-row equal to the width of cells in first table-row?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.