文本随机缩进 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”文本不在 div 中，即使在代码中也在其中。我想要实现的是可以插入视频的 3 个不同的列。当一列低于其他列时，我似乎无法做到这一点，我不知道为什么。

Answer 1

你在追求这样的事情吗？

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