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的间距/宽度

回答

相关问题