Question

我希望有两个侧面板的中心内容。我是否需要切换到％值而不是边距值的像素？

显然，我希望它们完全适合页面，并防止块在调整大小时向下移动。我计划在线下使用@media查询。 HTML：

<div>
    <div class="box1">Box 1</div>
    <div class="box2">Box 2</div>
    <div class="box3">Box 3</div>
</div>

CSS：

div.box1 {
    width:23%;
    margin:5px;
    border: 3px solid #73AD21;
    float:left;
    height:500px;
}
div.box2 {
    width:50%;
    margin:5px;
    border: 3px solid #73AD21;
    float:left;
    height:500px;
}
div.box3 {
    width:23%;
    margin:5px;
    border: 3px solid #73AD21;
    float:left;
    height:500px;
}

Jsfiddle

Answer 1

为防止其向下移动，您可以使用flexbox

小提琴：https://jsfiddle.net/esLm2gmm/

<强> HTML

<div class="container">
    <div class="box1">Box 1</div>
    <div class="box2">Box 2</div>
    <div class="box3">Box 3</div>
</div>

<强> CSS

.container
{
    display:flex;
    flex-wrap:nowrap;
}

div.box1 {
    width:23%;
    margin:5px;
    border: 3px solid #73AD21;
    float:left;
    height:500px;
}
div.box2 {
    width:50%;
    margin:5px;
    border: 3px solid #73AD21;
    float:left;
    height:500px;
}
div.box3 {
    width:23%;
    margin:5px;
    border: 3px solid #73AD21;
    float:left;
    height:500px;
}

Answer 2

您仍然可以使用%表示宽度，px表示填充，边距和边框。但是在设置宽度时你必须考虑到这些。最简单的方法是使用calc。

以下是div 1的示例。您希望它的左边距为5px，右边距为5px，左边距为3px，右边距为3px，需要23％。边距和边框宽16px。所以你的宽度可以是calc(50% - 16px);

以下是使用calc

的完整CSS

div.box1 {
    width:calc(23% - 16px);
    margin:5px;
    border: 3px solid #73AD21;
    float:left;
    height:500px;
} 

div.box2 {
    width:calc(50% - 16px);
    margin:5px;
    border: 3px solid #73AD21;
    float:left;
    height:500px;
} 
div.box3 {
    width:calc(23% - 16px);
    margin:5px;
    border: 3px solid #73AD21;
    float:left;
    height:500px;
}

Here是您更新的小提琴。

Answer 3

现在你可以使用display：table和display：table-cell来获得很酷的列布局

<div class="main">
    <div class="box1">Box 1</div>
    <div class="box2">Box 2</div>
    <div class="box3">Box 3</div>
</div>



.main {
   display:table;
   table-layout:fixed;   
   width:100%;
}
.box1, .box2, .box3 {
    display:table-cell;
}
div.box1 {
    width:23%;
    padding:5px;
    border: 3px solid #73AD21;
}
div.box2 {
    width:50%;
    padding:5px;
    border: 3px solid #73AD21;
}
div.box3 {
    width:23%;
    padding:5px;
    border: 3px solid #73AD21;
}

您也可以使用display：flex，但它与IE9不兼容

Answer 4

是的，百分比是一个很好的方式。 Bootstrap框架甚至更好。以下是解决方案：jsfiddle

HTML

<div class="wrapper">
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
  <div class="box3">Box 3</div>
</div>

CSS

.wrapper{
    display:inline-block; 
    width: 100%; 
    float: left; 
}

.box1 {
    width:20%;
    margin:5px;
    border: 3px solid #73AD21;
    float:left;
    height:500px;
} 

.box2 {
    width:50%;
    margin:5px;
    border: 3px solid #73AD21;
    float:left;
    height:500px;
} 
.box3 {
    width:20%;
    margin:5px;
    border: 3px solid #73AD21;
    float:left;
    height:500px;
}

您的旁边内容的百分比必须更低，因为边际占据了部分空间。

Answer 5

不，你不必。

如果您想以两种方式（垂直和水平）居中元素，您只需使用CSS即可：

position: absolute;
display: block;
left: 50%;
top: 50%;
width: 200px;
height: 300px;
margin-left: -100px;
margin-top: -150px;

这将使其应用的div居中。为什么？因为您可以在边距上使用负值，这会将div移动到从0x0像素位置开始的另一个方向，而不是文档的角。结合这个＆＃34;左：50％＆＃34;和＆＃34; top：50％＆＃34;并且使用宽度的一半为负边距左边，高度的一半为负边距 - 顶部将元素的中心放置在左边：50％和顶部：50％，这显然是中心的页面。

对于左边的元素，你必须使用左边div的宽度的一半加上中心div的宽度为margin-left以负面方式，对于右边的元素你必须使用右侧div的宽度的一半以负方式加上中心div的宽度为margin-left以正方式。

<html>
    <head>
        <style type="text/css">
            div#left{
                position: absolute;
                display: block;
                left: 50%;
                top: 50%;
                width: 200px;
                height: 300px;
                margin-left: -300px;
                margin-top: -150px;
                background-color: green;
            }
            div#centered{
                position: absolute;
                display: block;
                left: 50%;
                top: 50%;
                width: 200px;
                height: 300px;
                margin-left: -100px;
                margin-top: -150px;
                background-color: red;
            }
            div#right{
                position: absolute;
                display: block;
                left: 50%;
                top: 50%;
                width: 200px;
                height: 300px;
                margin-left: 100px;
                margin-top: -150px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div id="left"></div>
        <div id="centered"></div>
        <div id="right"></div>
    </body>
</html>

在宽度上正确使用边距，百分比为％

5 个答案: