个人中心
gpt4 book ai didi

html - 我的专栏与使用 float :right 不相反

转载 作者：太空宇宙 更新时间：2023-11-04 10:48:44 24 4
gpt4 key购买 nike

所以我使用 aside html5 语义来制作列。我想让它们在左边和右边所以我只是使用类来使用 float:right 让它们彼此相对。但出于某种奇怪的原因我无法理解，它在最后一个中不起作用。???

p.s 我是 html 或一般编码的新手。不要介意代码的美学。

#wrapper{
    width: 900px;
	height: 800px;
	margin-left: auto;
	margin-right: auto;
    font-family: khand,sans-serif;
	font-weight: bold;	
}
#socialmedia1 {
    background-image: url(tw.png);  
    background-size: 20px 20px;
    width: 20px;
    height: 20px;
    float: right;
    margin:38px 10px 0px 0px;

}
#socialmedia2 {
    background-image: url(fb.png);  
    background-size: 20px 20px;
    width: 20px;
    height: 20px;
    float: right;
    margin: 38px 10px 0px 0px;
}
#socialmedia3 {
    background-image: url(insta.png);  
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
    float: right;
    margin: 30px 10px 0px 0px;

}		
 header{
    width: 800px;
	height: 70px;
	border: 3px solid black;
	bottom: 20px;
	position: relative;    /* Had to move this to the bottom
                            to make space for icons*/
	bottom: -40px;
	margin-left: auto;
	margin-right: auto;
	 
 }
 hr{
    height: 0px;
    padding: 0px;
    margin: 2px;


 }
 .logo{
	background-image :url(logo.png);
	background-size: 140px 140px;
	width: 140px;
	height:140px;
	position:relative;
	bottom: 35px;
	left: 20px;
 }
ul{	
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #fff;
    width: 450px;
    margin-left: auto;
    margin-right: auto;
	position: relative;
	bottom: 20px;
}
li a {
	display: block;
	color: black;
	padding: 14px 16px;
    text-decoration: none;
}
li a:hover:not(.active) {
	background-color: #911111;
}
li {
    float: left;
}
aside{
	width: 120px;       /*logo overlaps gotta use position relative..EDIT Nevermind i could*
	just add margin to make space without fucking erthing up*/
	height: 150px;
	border: 3px solid black;	
    margin-top: 15px;
	margin-bottom: 5px;
}
aside.right{
    width: 120px;
    height: 150px;
    border: 3px solid black;
    float: right;

}
.titlebannerbox{
	width: 120px;
	height: 25px;
	background-color: #911111;
	position: relative;
	bottom: 17px;
    color: white;

 }
.asidelogo{
   width: 27px;
   height: 27px;
   background-size: 27px 27px;
   background-image: url(titlebannerlogo.png);
   position: relative;
   bottom: 60px;
   margin-bottom: -65px;	
}
footer {
	width: 800px;
	height: 70px;
	border: 3px solid black;
	margin-left: auto;
	margin-right: auto;	
	margin-top: 40px;
}


 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link href='https://fonts.googleapis.com/css?family=Khand:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet"href="style.css">
<style>
</style>
</head>
  <body> 
     <div id="wrapper">
       <header> 
           <a href="https://twitter.com" id="socialmedia1"></a>
           <a href="https://facebook.com" id="socialmedia2"></a>
           <a href="https://youtube.com" id="socialmedia3"></a>       
		       <div class="logo"></div>		  
       </header>
	       <nav>	
		       <ul>
		         <li><a href="home.html">Home</a></li>
			       <li><a href="home.html">Home</a></li>
			       <li><a href="home.html">Home</a></li>
			       <li><a href="home.html">Home</a></li>
			       <li><a href="home.html">Home</a></li>
			       <li><a href="home.html">Home</a></li>
		       </ul>	
		     </nav>
		   <aside class="right">
           <p class="titlebannerbox" align="right">Salary</p>
           <p class="asidelogo"></p>
           <hr>
           <table cellspacing="0" style="border-spacing:-5px;">
             <tr style="line-height: 15px;">
               <td style="width: 10%">Ruby</td>
               <td style="text-align: right">$109k</td>
             </tr>
             <tr style="line-height: 15px;">
               <td>Object C</td>
               <td style="text-align: right">$108k</td>
             </tr> 
             <tr style="line-height: 15px;">
               <td>Python</td>
               <td style="text-align: right">$100k</td>
             </tr>
             <tr style="line-height: 15px;">
               <td>Java</td>
               <td style="text-align: right">$94k</td>
             </tr>
             <tr style="line-height: 15px;">
               <td>C++</td>
               <td style="text-align: right">$93k</td>
             </tr>
             <tr style="line-height: 15px;">
               <td>Javascript</td>
               <td style="text-align: right;">$91k</td>
             </tr>
               <tr style="line-height: 15px;">
               <td>C</td>
               <td style="text-align: right;">$90k</td>
             </tr>
           </table>          
       </aside>
       <aside>
		       <p class="titlebannerbox" align="right">Learned</p>
           <p class="asidelogo"></p>
           <hr>
           <table cellspacing="0" style="border-spacing:-5px;">
             <tr style="line-height: 15px;">
               <td style="width: 10%">HTML</td>
               <td style="text-align: right">60%</td>
             </tr>
             <tr style="line-height: 15px;">
               <td>CSS</td>
               <td style="text-align: right">60%</td>
             </tr> 
             <tr style="line-height: 15px;">
               <td>Javascript</td>
               <td style="text-align: right">0.001%</td>
             </tr>
             <tr style="line-height: 15px;">
               <td>Java</td>
               <td style="text-align: right">0%</td>
             </tr>
             <tr style="line-height: 15px;">
               <td>PhP</td>
               <td style="text-align: right">0%</td>
             </tr>
             <tr style="line-height: 15px;">
               <td>Ruby</td>
               <td style="text-align: right;">0%</td>
             </tr>
           </table>
		   </aside>
       <aside class="right">
           <p class="titlebannerbox" align="right">Salary</p>
           <p class="asidelogo"></p>
           <hr>
           <table cellspacing="0" style="border-spacing:-5px;">
             <tr style="line-height: 15px;">
               <td style="width: 10%">Ruby</td>
               <td style="text-align: right">$109k</td>
             </tr>
             <tr style="line-height: 15px;">
               <td>Object C</td>
               <td style="text-align: right">$108k</td>
             </tr> 
             <tr style="line-height: 15px;">
               <td>Python</td>
               <td style="text-align: right">$100k</td>
             </tr>
             <tr style="line-height: 15px;">
               <td>Java</td>
               <td style="text-align: right">$94k</td>
             </tr>
             <tr style="line-height: 15px;">
               <td>C++</td>
               <td style="text-align: right">$93k</td>
             </tr>
             <tr style="line-height: 15px;">
               <td>Javascript</td>
               <td style="text-align: right;">$91k</td>
             </tr>
               <tr style="line-height: 15px;">
               <td>C</td>
               <td style="text-align: right;">$90k</td>
             </tr>
           </table>          
       </aside>
       <aside style="color:black">		
         <p class="titlebannerbox" align="right">Popularity</p>   
         <p class="asidelogo"></p>
         <hr>
           <table cellspacing="0" style="border-spacing:-5;">
             <tr style="line-height: 15px;">
               <td style="width: 10%">Python</td>
               <td style="text-align: right">31.2%</td>
             </tr>
             <tr style="line-height: 15px;">
               <td>Java</td>
               <td style="text-align: right">19.6%</td>
             </tr> 
             <tr style="line-height: 15px;">
               <td>C++</td>
               <td style="text-align: right">9.8%</td>
             </tr>
             <tr style="line-height: 15px;">
               <td>C#</td>
               <td style="text-align: right">7.4%</td>
             </tr>
             <tr style="line-height: 15px;">
               <td>Ruby</td>
               <td style="text-align: right">7.1%</td>
             </tr>
             <tr style="line-height: 15px;">
               <td>Javascript</td>
               <td style="text-align: right;">6.5%</td>
             </tr>
             <tr style="line-height: 15px;">
               <td>C</td>
               <td style="text-align: right;">6.1%</td>
             </tr>
         </table>
       </aside>
       <aside class="right">
           <p class="titlebannerbox" align="right">Salary</p>
           <p class="asidelogo"></p>
           <hr>
           <table cellspacing="0" style="border-spacing:-5px;">
             <tr style="line-height: 15px;">
               <td style="width: 10%">Ruby</td>
               <td style="text-align: right">$109k</td>
             </tr>
             <tr style="line-height: 15px;">
               <td>Object C</td>
               <td style="text-align: right">$108k</td>
             </tr> 
             <tr style="line-height: 15px;">
               <td>Python</td>
               <td style="text-align: right">$100k</td>
             </tr>
             <tr style="line-height: 15px;">
               <td>Java</td>
               <td style="text-align: right">$94k</td>
             </tr>
             <tr style="line-height: 15px;">
               <td>C++</td>
               <td style="text-align: right">$93k</td>
             </tr>
             <tr style="line-height: 15px;">
               <td>Javascript</td>
               <td style="text-align: right;">$91k</td>
             </tr>
               <tr style="line-height: 15px;">
               <td>C</td>
               <td style="text-align: right;">$90k</td>
             </tr>
           </table>          
       </aside>
       <aside>
         <p class="titlebannerbox" align="right">Difficulty</p>
         <p class="asidelogo"></p>
         <hr>
         <table cellspacing="0" style="border-spacing:0;">
             <tr style="line-height: 15px;">
               <td style="width: 30%;">C</td>
               <td style="text-align: right;vertical-align: sub;">*****</td>
             </tr>
             <tr style="line-height: 15px;">
               <td>C+++</td>
               <td style="text-align: right;">*****</td>
             </tr> 
             <tr style="line-height: 15px;">
               <td>Java</td>
               <td style="text-align: right">****</td>
             </tr>
             <tr style="line-height: 15px;">
               <td>C#</td>
               <td style="text-align: right;">***</td>
             </tr>
             <tr style="line-height: 15px;">
               <td>Javascript</td>
               <td style="text-align: right">**</td>
             </tr>
             <tr style="line-height: 15px;">
               <td>Python</td>
               <td style="text-align:right;">*</td>
             </tr>
             <tr style="line-height: 15px;">
               <td>Ruby</td>
               <td style="text-align: right;">*</td>
             </tr>
         </table>
       </aside>
     </div> <!-- End of Wrapper-->
       
        


	 </body>
</html>

最佳答案

替换你的:

aside.right{
    width: 120px;
    height: 150px;
    border: 3px solid black;
    float: right;
}

用这个:

aside.right{
    width: 120px;
    height: 150px;
    border: 3px solid black;
    float: right;
    clear:right;
}

附言:
- 我添加了 clear: right;行
- 在每个 float:right 之后，你必须重置 float 元素，通过使用 clear: right，所以位于下面的下一个元素将从左边开始绘制，就像上面的元素一样

关于html - 我的专栏与使用 float :right 不相反，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35153740/

24 4 0
文章推荐： python - python编码风格的单词定界符？
文章推荐： linux - 只想为所有服务发送一封电子邮件
文章推荐： java - Spring AWS 上下文凭证 - 不起作用
文章推荐： CSS:这个插件中的汉堡包图标是如何生成的？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com