文本中隨機縮進1號線下來

Question

我在CSS中使用float: right問題

.herro {float:right;}.isaac { 
 
padding: 4px; 
 
margin-right:2%; 
 
Margin-left:2%; 
 
background-color: #2E64FE; 
 
-webkit-box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.4); 
 
-moz-box-shadow: 0px 2px 12px rgba(23, 69, 88, .5); 
 
-webkit-border-radius: 100px; 
 
-moz-border-radius: 100px; 
 
border-radius: 10px; 
 
} 
 

 
.dropbtn { 
 
background-color: #2E9AFE; 
 
color: white; 
 
padding: 16px; 
 
font-size: 16px; 
 
border: none; 
 
cursor: pointer; 
 
} 
 

 
.dropdown { 
 
position: relative; 
 
display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
display: none; 
 
position: absolute; 
 
background-color: #f9f9f9; 
 
min-width: 160px; 
 
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
} 
 

 
.dropdown-content a { 
 
color: black; 
 
padding: 12px 16px; 
 
text-decoration: none; 
 
display: block; 
 
} 
 

 
.dropdown-content a:hover {background-color: #f1f1f1} 
 

 
.dropdown:hover .dropdown-content { 
 
display: block; 
 
} 
 

 
.dropdown:hover .dropbtn { 
 
background-color: #2E2EFE;}

<div class="isaac" style="padding:5px;"> 
 
<img class="left"src="http://www.conway.k12.wa.us/sites/default/files/logov4.png" width="20%"> 
 
<div class="herro">A Website by Isaac Sybrandy, Junior Website Craftsman.</div> 
 
<br> 
 
<div class="dropdown" style="float:right; margin-right:32px;"> 
 
<button class="dropbtn">Sources</button> 
 
<div class="dropdown-content"> 
 
<a href="#">Isaac</a> 
 
<a href="#">Mr. Rawson</a> 
 
</div> 
 
</div><p style="color:#2E64FE; margin-right:39px;">.</p></div>< 
 
<div class="isaac"><p style="Margin left;auto: Margin-right:auto;">  
 
This Website is Created by Isaac Sybrandy, For reasons Given to me by 
 
Mr. Rawson Of Conway School. This wesbite is Meant to host all of 7th 
 
grades Health Education Videos and is put here for The Younger grades 
 
to Watch and Learn about health and have some Fun at the same time. You 
 
can either watch all of the videos at once, (Below,) 
 
or watch then seperately, one at a time.(Farther Below.) </p><br> 
 
<center>Main Video.</center> 
 
<br><br><br><p style="Float:left;">Video 1</p><p style="margin- 
 
left:48%;">Video 2</P><p style="float:right;">Video 3</p></div> 
 
</body></html>

「視頻3」的文字是關閉的股利，即使在代碼裏面它。我想要實現的是我可以插入視頻的3個不同列。當一列低於其他列時，我似乎無法完成此任務，但我不知道爲什麼。

Answer 1

<center>Main Video.</center> 
<br><br><br><p style="Float:left;">Video 1</p><p style="margin- 
left:48%;">Video 2</P><p style="float:right;">Video 3</p></div> 

到

<center>Main Video.</center> 
<br><br><br> 
<ul style="list-style:none;"> 
<li style="float: left; margin: 0px 10px 0px 0px"><p>Video 1</p></li> 
<li style="float: left; margin: 0px 10px 0px 0px"><p>Video 2</p></li> 
<li style="float: left; margin: 0px 10px 0px 0px"><p>Video 3</p></li> 
</ul> 
<div style="clear: both;"></div> 
</div> 

在你的CSS文件考慮定義爲ul和li一類變更

Fiddle Example

Answer 2

你這樣的事情之後？

.isaac { 
 
    padding: 4px; 
 
    margin-right:2%; 
 
    margin-left:2%; 
 
    background-color: #2E64FE; 
 
    border-radius: 10px; 
 
} 
 

 
.videos{ 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
} 
 
.video{ 
 
    flex-basis: 30%; 
 
    flex-shrink: 0; 
 
    background-color: #efefef; 
 
    text-align: center; 
 
}

<div class="isaac"> 
 
    <p>This Website is Created by Isaac Sybrandy, For reasons Given to me by Mr. Rawson Of Conway School. This wesbite is Meant to host all of 7th grades Health Education Videos and is put here for The Younger grades to Watch and Learn about health and have some Fun at the same time. You can either watch all of the videos at once, (Below,) or watch then seperately, one at a time.(Farther Below.)</p> 
 
    <center>Main Video.</center> 
 
    <div class="videos"> 
 
    <div class="video">Video 1</div> 
 
    <div class="video">Video 2</div> 
 
    <div class="video">Video 3</div> 
 
    </div> 
 
</div>