在寬度上正確使用邊距，百分比爲％

我希望使用2個側面板有一些居中的內容。我是否需要切換到百分比值而不是邊距值的像素？在寬度上正確使用邊距，百分比爲％

顯然我希望它們完全適合頁面並防止塊在調整大小時向下移動。我計劃使用@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

來源

2015-11-12 Reserge

嘗試：'保證金：5px的汽車;' –

爲了防止它向下移動，你可以使用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; 
}

來源

2015-11-12 15:26:20 Jesse

，您仍然可以使用%寬度和px進行填充，邊距和邊框。但是在設置寬度時，您必須考慮這些因素。最簡單的方法是用calc。

這是給你的div 1爲例，用戶希望它採取23％與5像素的左邊界，爲5px的右邊緣的3px的左邊框的3px的右邊框。邊距和邊框寬16px。所以，你的寬度可以calc(50% - 16px);

下面是一個使用calc

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被更新的提琴你完成CSS。

來源

2015-11-12 15:26:57 morgul

現在你可以使用顯示：表並顯示：表細胞有清涼列布局

<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; 
}

您也可以使用顯示：彎曲，但你這不是與IE9

來源

2015-11-12 15:27:04

我一直以爲表格是基於HTML5的今天皺着眉頭的佈局？ – Reserge

是兼容的，百分比是一個很好的方法。 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; 
}

的百分比必須是你身邊含量甚至更低，因爲保證金賬戶的一些空間。

來源

2015-11-12 15:29:41 coozin

-1

不，你不需要。

如果你想只使用CSS居中這兩種方式（垂直和水平方向）的元素，你可以做到這一點：

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

這將圍繞它應用於div。爲什麼？因爲您可以在邊距上使用負值，這會將div從0x0像素位置開始移動到另一個方向，而不是文檔的角落。將此與「左：50％」和「上：50％」組合使用，將負值的一半寬度用於邊距左側，將高度的一半用於邊距頂部的負值將使元素的中心位於左側：50％，頂部：50％，這顯然是頁面的中心。

對於左側的元素，您必須使用左側div的寬度的一半加上居中的div的寬度，以負方式使用margin-left，對於右側的元素，您必須使用右側div的寬度的一半以負方式加上居中div的寬度，以正向方式保留左側。

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

來源

2015-11-12 15:37:29

爲什麼downvote？這是一個有效的答案。檢查HTML中的輸出。此外它是簡單的CSS，不使用浮動與divs arround和東西。它使用絕對px值，而beeing仍然響應並可以被複制，所以wtf？ –

在寬度上正確使用邊距，百分比爲％

回答

相關問題