CSS的間距/寬度

你好，我是新來的CSS，並試圖創建一個3列基本網頁。我的HTML如下：CSS的間距/寬度

<!DOCTYPE html> 
<html> 
<head lang="{{ config('app.locale') }}"> 
    <title>Test Title</title> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="../css/all.css" type="text/css"/> 
</head> 
<body> 

<!--Top masthead of the website--> 
<header id="welcome-masthead"> 
    <h1> Sexy Website Header </h1> 
</header> 

<!--Left portion of the website m--> 
<article id="welcome-left-section"> 
    <nav> 
    <a href="#welcome-masthead">- To Top</a> <br> 
    <br> 
    <a href="#welcome-bottom">- To Bottom</a> <br> 
    </nav> 
</article> 

<!--Center portion of the website --> 
<article id="welcome-center-section"> 
    <div> 
    <p> Some text in the center section </p> 
    </div> 
</article> 

<!--Right portion of the website--> 
<article id="welcome-right-section"> 
    <div> 
    <p> Some text in the right section </p> 
    </div> 
</article> 

<footer id="welcome-bottom"> 
    <div> 
    <p> This is the footer </p> 
    </div> 
</footer>

我創建了一個CSS文件，並已與利潤率和寬度設置玩弄和大部分我已經完全創造了一切，是功能齊全，所有的屏幕分辨率均勻間隔（即放大和縮小並不會顯着改變頁面的外觀）。但是，有一部分（中心部分和右部分之間的差距）越大，頁面縮小越多。我無法找到一種解決方案，將這兩部分「粘」在一起，保持兩者之間的距離爲2em。

我的CSS如下。

#welcome-masthead { 
    height: 6em; 

    margin: 2em 5em; 
    padding-top: 0.1px; 

    white-space: nowrap; 
    text-align: center; 

    background-color: #e8eaed; 
} 

#welcome-left-section { 
    float: left; 

    padding: 0.8em; 
    margin-right: 2em; 
    margin-left: 2em; 

    height: 1000px; 
    width: 10%; 

    background-color: #e8eaed; 
    border: thin,solid,#000000; 
} 

#welcome-center-section { 
    padding: 0.8em; 
    margin-right: 2em; 

    height: 1000px; 
    width: 61%; 

    display: inline-block; 

    background-color: #e8eaed; 
    border: thin,solid,#000000; 
} 

#welcome-right-section { 
    float: right; 

    padding: 0.8em; 
    margin-right:2em; 

    height: 1000px; 
    width: 20%; 

    background-color: #e8eaed; 
    border:thin,solid,#000000; 
} 

#welcome-bottom { 
    width:auto; 
    height: 5em; 

    padding: 0.8em; 
    margin: 2em; 

    background-color: #e8eaed; 
    border:thin,solid,#000000; 
}

任何幫助表示讚賞！我對CSS很新，所以我很抱歉，如果這是一個愚蠢的錯誤！

來源

2017-03-08 Zac Grafton

正常情況下，您應該使用'class'而不是'id'作爲CSS樣式。此外，你的CSS中有多個錯誤。最後，您可以製作一個JSFiddle，以便我們可以更輕鬆地引用您的案例。 – Raptor

使用這個CSS代碼：

welcome-center-section, 
welcome-right-section, 
welcome-left-section { 
    float: left; 
    width: 33.3%; 
    } 
.clearfix { 
    clear: both; 
    display: block; 
    }

注：添加右側立柱

<article id="welcome-right-section"> 
    <div> 
    <p> Some text in the right section </p> 
    </div> 
</article> 
<div class=clearfix></div> <!-- To reset float -->

來源

2017-03-08 07:54:49

您還沒有真正得到充分的結束標記下方clearfix類控制你的水平尺寸，因爲在定義了寬度之後，你添加了不同測量的邊距。寬度（61％，20％和10％）合計爲91％，但您仍然不知道2em邊距會給您帶來什麼，特別是因爲EM是一個角色 - 當您放大或縮小時會發生變化。

我的建議是使用flex。閱讀它。使用非常簡單。這是你正在努力完成的一個直截了當的例子。

.container {display: flex; justify-content: space-between; width: 100%} 
 
.leftcolumn,.middlecolumn, .rightcolumn {width: 28%}

<div class="container"> 
 
<div class="leftcolumn">Left leaning material</div> 
 
<div class="middlecolumn">Moderate material</div> 
 
<div class="rightcolumn">Right leaning material</div> 
 
</div>

另一件事要記住的是，填充實際生長的元素，而不是向外向內推。這進一步混淆了測量。使用flex可以消除邊距和填充。如果您必須在這些列上填充空格，則可能需要整潔（以及更多的跨瀏覽器正確），以便只在具有空白的列中放置另一個DIV。

如果由於某種原因您不想使用Flex，您可以在列之間始終創建間隔區DIV。

來源

2017-03-08 08:09:38 HaLeiVi

很高興聽到您的學習網頁設計！既然你剛剛開始，我認爲值得一提的是，儘管使用float是完全有效的，但更現代的方式（以及大多數框架朝向的方式（例如Bootstrap 4））是使用Flexbox。 Flexbox可以讓你實現同樣的目標，但很多工作都是爲你完成的，而且它的響應速度更快。

對flexbox的瀏覽器支持現在還算不錯，現在請參閱here。

我重新創建了使用flexbox爲您提供的一個創意。

正如我所說，這是未來的方式，所以不妨學習它。

PS。確保您全屏查看，以便您可以調整大小並查看Flexbox魔術。

.wrapper { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-flow: row wrap; 
 
    flex-flow: row wrap; 
 
    font-weight: bold; 
 
    text-align: center; 
 
} 
 

 
.wrapper > * { 
 
    padding: 10px; 
 
    flex: 1 100%; 
 
} 
 

 
.header { 
 
    height: 6em; 
 
    background: #e8eaed; 
 
} 
 

 
.footer { 
 
    background: lightgreen; 
 
} 
 

 
.main { 
 
    text-align: left; 
 
    background: deepskyblue; 
 
    height: 500px; 
 
} 
 

 
.aside-1 { 
 
    background: gold; 
 
} 
 

 
.aside-2 { 
 
    background: hotpink; 
 
} 
 

 
@media all and (min-width: 600px) { 
 
    .aside { 
 
    flex: 1 auto; 
 
    } 
 
} 
 
@media all and (min-width: 800px) { 
 
    .main { 
 
    flex: 3 0px; 
 
    } 
 

 
    .aside-1 { 
 
    order: 1; 
 
    } 
 

 
    .main { 
 
    order: 2; 
 
    } 
 

 
    .aside-2 { 
 
    order: 3; 
 
    } 
 

 
    .footer { 
 
    order: 4; 
 
    } 
 
} 
 
body { 
 
    padding: 2em; 
 
}

<div class="wrapper"> 
 
    <header class="header"><h1> Sexy Website Header </h1></header> 
 
    <article class="main"> 
 
    <p>Some text in the center section</p> 
 
    </article> 
 
    <aside class="aside aside-1">Aside 1</aside> 
 
    <aside class="aside aside-2">Aside 2</aside> 
 
    <footer class="footer">Footer</footer> 
 
</div>

這裏是萬一Fiddle你需要它。

來源

2017-03-08 08:18:40 Brad

CSS的間距/寬度

回答

相關問題