Question

我想制作这样的布局：

enter image description here

但是，我在下面MCVE获得的是：

enter image description here

CODE：

<!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>是不合适的。

此页面的重要方面：所有这些元素都在表单中，但我不认为这对设计很重要。

Answer 1

实际上有一些事情需要理顺：

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

这些东西应该会给你你正在寻找的效果。

Answer 2

将此添加到“row”类（.row）

display: table;
width: 100%;

并消除“左内”和“右内”类中的“浮动”

（在班级“.row”中“min -height：200px”之后缺少分号）

也许这就是他没有拿桌子的原因

Answer 3

<!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 {
    display: table;
width: 100%;
    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>

带边距的CSS布局表

3 个答案: