文本随机缩进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

你是否经历过这样的事情？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;