1
私はまだ最初のウェブサイトプロジェクトの改善に取り組んでいます。何度も頭痛を引き起こしている1つの問題は、いくつかのセクションが上記のものにあふれていることです。私がオーバーフローと言うとき、括弧で囲まれた要素をクリックすると、ライブプレビューで強調表示されると、上のように他のコンテンツの周りに実際にマージンが表示されます。これは私のウェブサイトのさまざまなセクションで起こっていますが、私はそれを理解できません。私はここでは初心者ですので、理由とその方法をウェブサイト上で普遍的に修正する簡単な理由は確信しています。なし」プロパティを理想的に、私は繰り返し注意、オーバーフローなしプロパティーありえない、それを使用する必要がなく、これを解決したいと思います：セクションが繰り返しオーバーフローする
一部セクションのために私は「オーバーフローでこれを克服することができます。特に1は私がの画像を示している。すべてのセクションのために働くことは誰もがここにいくつかの明確さをしてくださいお願いします
html {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
body {
background-color: #f6f8fa;
color: #4E6E9B;
font-family: 'Signika', sans-serif;
font-weight: 'E';
}
/* END GENERAL STYLES -----------*/
.one-third-container {
float: left;
width: 100%;
overflow: hidden;
}
.about-one-third {
width: 33.3333%;
padding: 2% 0;
float: left;
text-align: center;
background-color: #0066B2;
color: #f6f8fa;
}
.about-one-third i {
font-size: 8rem;
padding-bottom: 5%;
}
/* END ONE THIRD SECTIONS ------*/
.services-offered {
padding-left: 0;
margin: 2% 5%;
-webkit-padding-start: 0;
list-style-type: none;
overflow: none;
}
.services-offered li {
display: inline-block;
width: 20%;
vertical-align: top;
padding: 0 0 0 1.8rem;
text-align: justify;
}
.services-offered li:before {
content: "\f00c";
font-family: FontAwesome;
width: 1.8rem;
margin-left: -1.8rem;
margin-right: 0.5rem;
}
/* END SERVICES OFFERED ---------*/<!DOCTYPE html>
<html>
<head>
<title>W Gooderham Gas Services</title>
<link href="https://fonts.googleapis.com/css?family=Raleway:200,700|Signika:300" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>[enter image description here][1]
<div class="one-third-container">
<section class="about-one-third">
<td>
<i id="third-border" class="fa fa-calendar"></i>
</td>
<h2>Routine Servicing</h2>
</section>
<section class="about-one-third" id="centre-third">
<td>
<i id="third-border" class="fa fa-wrench"></i>
</td>
<h2>Installation</h2>
</section>
<section class="about-one-third" id="breakdown">
<td>
<i class="fa fa-snowflake-o"></i>
</td>
<h2>Breakdowns</h2>
</section>
</div>
<! END ONE THIRD SECTION --------------------->
<ul class="services-offered">
<li>
Installation and commission of natural gas central heating systems.
</li>
<li>
Routine servicing of all natural gas appliances including warm air units.
</li>
<li>
If any of your gas appliances breakdown, we provide a 7 day a week callout service to get them back up and running.
</li>
<li>
We can provide gas safety landlord certification for all gas appliances in your properties.
</li>
</ul>
私はあなたのコードをすべて読んでいませんでしたが、最も一般的な問題は「フロート」のためにコンテナが折りたたまれていることが原因です。あなたがまだそれを試していない場合、Googleは "clearfix"のために。 – deadfishli
うん、浮動小数点：left;が問題です – SourceOverflow
さて、私は要素のオーバーフローの原則を理解しています。だから私はコンテナからフロートを取り除いたが、それを3分の1のセクションに残した。しかし、コンテナ内の浮動小数点が他の要素に影響を与えてはならないことは間違いありません（結局のところ、スタイルは正しく含まれていますか？） –