-1
A
回答
5
你需要的是你的#bodytext的clearfix，因爲你所有的內容都是浮動的。
以下行添加到您的#bodytext：
#bodytext{
overflow: auto;
}
爲了更好地理解，爲什麼你需要一個clearfix，read this answer。
+0
@lumino，謝謝。 – mathmaniage
+1
我添加了一個鏈接，並附有一些進一步的解釋:) – lumio
+0
這很棒。 （看起來我只能在8分鐘後接受答案） – mathmaniage
0
您可以使用display:inline-block：
#bodytext {
display:inline-block;
}
0
你需要做兩兩件事：一是給CSS overflow:hidden到#bodytext和第二畢竟3格即FirstParagraph，SecondParagraph，ThirdParagraph你把<div class="clear"></div>和CSS明確的階級clear:both 。
0
只需使用float:left在#bodytext div來解決這個問題，檢查下面的代碼片段..
@font-face{
font-family: "handlee";
src : url("handlee.ttf");
}
@font-face{
font-family:"berkshirestyle";
src: url("berkshire.ttf");
}
body{
background-image: url("glass.jpg");
background-attachment: fixed;
background-repeat:no-repeat;
background-size:cover;
}
#FirstHeader{
float:left;
clear:left;
padding-left:100px;
color:white;
font-size: 70px;
color: rgb(122, 38, 0);
text-decoration: underline;
font-family: handlee;
font-style: italic;
}
#bodytext{
padding: 30px;
font-family: berkshirestyle, cursive;
font-size: 1em;
color: #BCBCBC;
float: left;
}
#bodytext{
clear:left;
margin-left: 30px;
margin-bottom: 50px;
border-bottom: 10px solid red;
background-color: red;
}
#bodytext div{
display: inline-block;
width: 30%;
margin-right: 20px;
float: left;
}
form{
clear:both;
}<h1 id = "FirstHeader">Coffes here</h1>
<img src="coffee.png" id = "Coffee" alt="coffee image" width="100" height="125"/>
<div id = "bodytext">
<div id = "FirstParagraph">
Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper,
Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa.
Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra.
Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper,
purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus vel
est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta
eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante.
Vestibulum sit amet ligula faucibus ligula auctor pretium non vel arcu.<br>
purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa.
Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra.
Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper,
purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus vel
est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta
eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante.
Vestibulum sit amet ligula faucibus ligula auctor pretium non vel arcu.purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa.
Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra.
Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper,
purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus vel
est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta
eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante.
Vestibulum sit amet ligula faucibus ligula auctor pretium non vel arcu.
</div>
<div id = "SecondParagraph">
purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa.
Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra.
Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper,
purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus vel
est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta
eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante.
Vestibulum sit amet ligula faucibus ligula auctor pretium non vel arcu.
<br/>
purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa.
Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra.
Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper,
purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus vel
est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta
eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante.
Vestibulum sit amet ligula faucibus ligula auctor pretium non vel arcu.purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa.
Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra.
Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper,
purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus vel
est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta
eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante.
Vestibulum sit amet ligula faucibus ligula auctor pretium non vel arcu.
</div>
<div id = "ThirdParagraph">
eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante.
Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa.
Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra.
Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper,
purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus vel
est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta
eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante.
Vestibulum sit amet ligula faucibus ligula auctor pretium non vel arcu.purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa.
Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra.
Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper,
purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus vel
est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta
eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante.
Vestibulum sit amet ligula faucibus ligula auctor pretium non vel arcu.
<br>
purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa.
Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra.
Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper,
purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus vel
est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta
eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante.
Vestibulum sit amet ligula faucibus ligula auctor pretium non vel arcu.
</div>
</div>
<form id = "MainForm">
<label for = "Name">Name: </label>
<input type="text" id = "Name" placeholder = "e.g nirajan basnet" required/>
<label for= "Email">Email</label>
<input type="email" id = "Email" placeholder="[email protected]" required/>
<label for = "Comment">Your comment: </label>
<br>
<textarea maxlength="100" id = "Comment" placeholder="What do you think about the site?"></textarea>
</form>
1
你有沒有正確清除的floats - 添加overflow: hidden到bodyText或添加after使用的元素clear: left：
#bodytext:after{
clear: left;
content: '';
display: block;
}
請參見下面的演示：
@font-face {
font-family: "handlee";
src: url("handlee.ttf");
}
@font-face {
font-family: "berkshirestyle";
src: url("berkshire.ttf");
}
body {
background-image: url("glass.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
#FirstHeader {
float: left;
clear: left;
padding-left: 100px;
color: white;
font-size: 70px;
color: rgb(122, 38, 0);
text-decoration: underline;
font-family: handlee;
font-style: italic;
}
#bodytext {
padding: 30px;
font-family: berkshirestyle, cursive;
font-size: 1em;
color: #BCBCBC;
overflow: hidden;
}
#bodytext:after{
clear: left;
content: '';
display: block;
}
#bodytext {
clear: left;
margin-left: 30px;
margin-bottom: 50px;
border-bottom: 10px solid red;
background-color: red;
}
#bodytext div {
display: inline-block;
width: 30%;
margin-right: 20px;
float: left;
}
form {
clear: both;
}<h1 id="FirstHeader">Coffes here</h1>
<img src="coffee.png" id="Coffee" alt="coffee image" width="100" height="125" />
<div id="bodytext">
<div id="FirstParagraph">
Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra. Duis
maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus
vel est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vestibulum sit amet ligula faucibus ligula auctor pretium non
vel arcu.<br> purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed
nulla in viverra. Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus est. Nulla vel tortor id ligula consequat fringilla dignissim
a sem. Duis eget risus vel est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vestibulum sit amet ligula faucibus
ligula auctor pretium non vel arcu.purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. Cras mattis felis est, a varius nisl euismod ac.
Mauris cursus sed nulla in viverra. Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus est. Nulla vel tortor id ligula consequat fringilla
dignissim a sem. Duis eget risus vel est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vestibulum sit amet ligula
faucibus ligula auctor pretium non vel arcu.
</div>
<div id="SecondParagraph">
purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra. Duis
maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus
vel est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vestibulum sit amet ligula faucibus ligula auctor pretium non
vel arcu.
<br/> purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra.
Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget
risus vel est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vestibulum sit amet ligula faucibus ligula auctor pretium
non vel arcu.purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla
in viverra. Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus est. Nulla vel tortor id ligula consequat fringilla dignissim a sem.
Duis eget risus vel est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vestibulum sit amet ligula faucibus ligula
auctor pretium non vel arcu.
</div>
<div id="ThirdParagraph">
eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra.
Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget
risus vel est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vestibulum sit amet ligula faucibus ligula auctor pretium
non vel arcu.purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla
in viverra. Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus est. Nulla vel tortor id ligula consequat fringilla dignissim a sem.
Duis eget risus vel est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vestibulum sit amet ligula faucibus ligula
auctor pretium non vel arcu.
<br> purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra.
Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget
risus vel est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vestibulum sit amet ligula faucibus ligula auctor pretium
non vel arcu.
</div>
</div>
<form id="MainForm">
<label for="Name">Name: </label>
<input type="text" id="Name" placeholder="e.g nirajan basnet" required/>
<label for="Email">Email</label>
<input type="email" id="Email" placeholder="[email protected]" required/>
<label for="Comment">Your comment: </label>
<br>
<textarea maxlength="100" id="Comment" placeholder="What do you think about the site?"></textarea>
</form>相關問題
- 1. 粘性元素，跟隨父母
- 2. 讓元素跟隨另一個元素
- 3. 刪除父元素如果子元素不存在元素
- 4. 修改父元素：子元素
- 5. 僅隱藏父元素的子元素
- 6. 將子元素移出父元素
- 7. 替代父的元素從子元素
- 8. 覆蓋父元素的子元素
- 9. 將子元素綁定到父元素
- 10. 跟蹤元素不與音頻元素
- 11. 如果子span元素爲空，則隱藏父元素元素
- 12. 表元素不以100％的父元素
- 13. 如何顯示父元素和父元素的兄弟之上的子元素？
- 14. 選擇跟隨選定元素的元素
- 15. 將父子元素放在父元素中reactjs
- 16. 將HTML子元素移出父項並刪除父元素
- 17. 在元素父項中應用css但不在子元素中
- 18. 父元素的造型不應適用於子元素
- 19. 子元素不擴大HTML體或父元素
- 20. 如果父元素不包含某個子元素， jQuery
- 21. 不允許子元素繼承父元素的樣式
- 22. 選擇子元素而不選擇父元素
- 23. css選擇器，具有子元素（及其子元素）的父元素
- 24. 當子元素大於父元素時，使子元素完全可見
- 25. 流體子元素與父
- 26. 子類中的父元素
- 27. 如何將子元素移動到父元素的另一個子元素上方，該父元素位於其父元素上方？
- 28. Createjs。線跟隨元素小提琴
- 29. 如果它的子div不包含子元素，則隱藏父子元素
- 30. 子元素不相同的寬度父
首先，請去閱讀[問]。相關代碼直接屬於您的問題，所以請對其進行相應編輯。 – CBroe
然後，你想研究如何關閉浮動元素__。 – CBroe
@lumio，標題？ – mathmaniage