縮放頁面時，div框的對齊更改併發生衝突

我在容器類中創建了兩個div框。在放大和縮小頁面時，div框的對齊會發生變化並相互碰撞。我附加了我的HTML和CSS。我需要在放大和縮小時將div框固定在容器類中。我被困在這裏。請幫忙嗎？縮放頁面時，div框的對齊更改併發生衝突

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<title>Untitled Document</title> 
 
<style type = "text/css"> 
 
*{ 
 
    margin:0; 
 
    padding:0; 
 
    font-family:Arial, Helvetica, sans-serif; 
 
    } 
 
body{ 
 
    background-color:#e1e3e4; 
 
    } 
 
.main{ 
 
    width:90%; 
 
    margin: 0 auto; 
 
    } 
 
header{ 
 
    height:160px; 
 
    background-color:#3c948b; 
 
    } 
 
.container{ 
 
    background-color: #f3f3f3; 
 
    min-height:500px; 
 

 
    } 
 
.content{ 
 
    float:left; 
 
    position:relative; 
 
    top:10px; 
 
    left:10px; 
 
    border: 2px solid #111; 
 
    width:70%; 
 
    } 
 
.panel{ 
 
    position:relative; 
 
    float:left; 
 
    top:10px; 
 
    left:20px; 
 
    border: 2px solid #111; 
 
    width:330px; 
 

 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div class="main"> 
 
    <header> 
 
     <h1>My personal blog</h1> 
 
    </header> 
 
    <div class="container"> 
 
     <div class="content"> 
 
      #content 
 
     </div> 
 
     <div class="panel"> 
 
      #panel 
 
     </div> 
 

 
    </div> 
 
</div> 
 
</body> 
 
</html>

來源

2016-07-14 Aswin Kumar

如何去除浮游物並用display: table做呢？

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<title>Untitled Document</title> 
 
<style type = "text/css"> 
 
*{ 
 
    margin:0; 
 
    padding:0; 
 
    font-family:Arial, Helvetica, sans-serif; 
 
} 
 
body{ 
 
    background-color:#e1e3e4; 
 
} 
 
.main{ 
 
    width:90%; 
 
    margin: 0 auto; 
 
} 
 
header{ 
 
    height:160px; 
 
    background-color:#3c948b; 
 
} 
 
.container{ 
 
    width: 100%; 
 
    display: table; 
 
    background-color: #f3f3f3; 
 
    min-height:500px; 
 
} 
 
.content{ 
 
    display: table-cell; 
 
    top:10px; 
 
    border: 2px solid #111; 
 
    width:70%; 
 
} 
 
.panel{ 
 
    display: table-cell; 
 
    top:10px; 
 
    border: 2px solid #111; 
 
    width:330px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div class="main"> 
 
\t <header> 
 
    \t <h1>My personal blog</h1> 
 
\t </header> 
 
    <div class="container"> 
 
\t \t <div class="content"> 
 
\t \t \t #content 
 
\t \t </div> 
 
\t \t <div class="panel"> 
 
\t \t \t #panel 
 
\t \t </div> 
 
    
 
    </div> 
 
</div> 
 
</body> 
 
</html>

來源

2016-07-14 15:08:55

是的，它的工作原理。非常感謝@PiotrZientara等等。 –

與您#content佔據當前窗口寬度的70％，只有30％#panel。但它的固定寬度爲330px，因此窗口小於1000px時不能並排放置。此外，邊框，襯墊等使用空間，所以所需的最小窗口寬度甚至更大。

使用兩個元素的相對寬度（70％/ 30％）並設置box-sizing樣式來計算實際寬度以包含填充和邊框（border-box）。

來源

2016-07-14 15:03:48

謝謝你回答我的先生。我這裏是新手。你能否用示例代碼來解釋我，以便更好地理解？ @JoachimSchirrmacher –

查看https://jsfiddle.net/oh25un56/例如 –

縮放頁面時，div框的對齊更改併發生衝突

回答

相關問題