我想做这样的布局:
但是，我得到的是这个 MCVE下面是:
代码:
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> MCVE </TITLE>
<STYLE>
body {
font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif;
background: #FDFDFD;
}
h1 {
font-size: 60px;
text-align: center;
margin: 40px;
color: #000;
}
.wrap {
width:60%;
margin:0 auto;
}
.header {
border: 1px double;
text-align:center;
}
.row {
align: center;
width:inherit;
background:#bbb;
min-height:200px
display:table;
}
.right-inner {
display:table-cell;
float:right;
width:50%;
background:#fff;
border-bottom:thick #06C;
}
.left-inner {
display:table-cell;
float:left;
width:50%;
background:#fff;
}
body {
background: #ccc; /* Old browsers */
}
</STYLE>
</HEAD>
<BODY>
<H1> MCVE </H1>
<!--FUNCTIONCALL DisplayLameCounter -->
<FORM ACTION="form.htm" METHOD=POST NAME="testform">
<div class="wrap">
<div class="header"><h2>HEADER</h2></div>
<div class="row">
<div class="left-inner">
<p><b>field1</b></p>
<input name="field1" type="range" min="1" max="5" step="1" />
<img src="http://www.goodhousekeeping.com/cm/goodhousekeeping/images/caramelized-apple-crostata-1224-200.jpg">
</div>
<div class="right-inner">
<p><b>field2</b></p>
<input name="field1" type="range" min="5" max="10" step="1" />
<img src="http://www.goodhousekeeping.com/cm/goodhousekeeping/images/caramelized-apple-crostata-1224-200.jpg">
</div>
</div>
<div class="row">
<div class="right-inner">
<p><b>field3</b></p>
<input name="field3" type="range" min="1" max="10" step="1" />
<img src="http://www.goodhousekeeping.com/cm/goodhousekeeping/images/caramelized-apple-crostata-1224-200.jpg">
</div>
<div class="left-inner">
<p><b>Direction:</b></p>
<input type="radio" name="radio" value="1" checked>1<br>
<input type="radio" name="radio" value="2">2<br>
<img src="http://www.goodhousekeeping.com/cm/goodhousekeeping/images/caramelized-apple-crostata-1224-200.jpg">
</div>
</div>
</div>
</FORM>
</BODY>
</HTML>
我最大的问题是在元素之间创建边距并使它们具有这种“表格”外观。由于这是用于布局，我想使用实际的 <table>会不合适。
此页面的重要方面:所有这些元素都在一个表单中，但我认为这对设计来说无关紧要。
最佳答案
这里实际上有几件事需要理顺:
-
.wrap需要有display: table而不是.row. -
.row应该有display: table-row而不是display: table. -
.left-inner和.right-inner不需要float. -
.row需求width: 100%. -
align应该是text-align. -
border: thick #06C应该是border: <no of pixels>px solid #06C.
这些东西应该会给你想要的效果。
关于html - 带边距的 CSS 布局表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29017373/