Html CSS的间距/宽度_Html_Css_Formatting_Styling_Spacing

Html CSS的间距/宽度

html css formatting

Html CSS的间距/宽度,html,css,formatting,styling,spacing,Html,Css,Formatting,Styling,Spacing,你好，我是CSS新手，正在尝试创建一个3列的基本网页。我的HTML如下 <!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">

你好，我是CSS新手，正在尝试创建一个3列的基本网页。我的HTML如下

<!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新手，所以如果这是一个愚蠢的错误，我道歉

使用以下css代码：

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

注意：在右侧列的结束标记下方添加clearfix类


右部分的一些文本

由于定义了宽度后添加了不同测量值的边距，因此无法完全控制水平尺寸。宽度（61%、20%和10%）加起来是91%，但你仍然不知道2em的边距给了你什么，特别是因为EM是一个字符，当你放大或缩小时，它会改变

我的建议是使用flex。仔细阅读。它使用起来非常简单。下面是一个简单的例子，说明您正在努力完成的任务

.container{display:flex；justify content:space-between；width:100%}
.leftcolumn、.middlecolumn、.rightcolumn{宽度：28%}


左倾材料
中等材料
右倾材料

很高兴听到您学习网页设计！由于您刚刚开始，我认为值得一提的是，尽管使用

float

是完全有效的，但更现代的方法（以及大多数框架的发展方向（例如））是使用。Flexbox可以让您实现同样的目标，但很多工作都是为您完成的，而且它的响应更加友好

flexbox的浏览器支持现在非常好，请参见

我重新创建了您使用flexbox所做的工作，为您提供了一个想法

正如我所说，这是未来的道路，所以我们不妨学习一下

另外，请确保您全屏查看，以便调整大小并查看flexbox魔术

.wrapper{
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit flex流：行换行；
柔性流：行换行；
字体大小：粗体；
文本对齐：居中；
}
.wrapper>*{
填充：10px；
弹性：1100%；
}
.标题{
身高：6em；
背景：#e8eaed；
}
.页脚{
背景：浅绿色；
}
梅因先生{
文本对齐：左对齐；
背景：深蓝；
高度：500px；
}
.1-1{
背景：金；
}
.2-2{
背景：火红；
}
@介质和全部（最小宽度：600px）{
.旁白{
弹性：1自动；
}
}
@介质和全部（最小宽度：800px）{
梅因先生{
flex:30px；
}
.1-1{
顺序：1；
}
梅因先生{
顺序：2；
}
.2-2{
顺序：3；
}
.页脚{
顺序：4；
}
}
身体{
填料：2米；
}


性感网站标题
中间部分的一些文本
旁白1
旁白2
页脚

通常，您应该使用

class

而不是

id

来设置CSS样式。此外，CSS中存在多个错误。最后，您可以制作一个JSFIDLE，这样我们可以更容易地引用您的案例。

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