how2j.cn

下载区
文件名 文件大小
img.rar 41k
answer.rar 42k

解压rar如果失败，请用5.21版本或者更高版本的winrar

点击下载 winrar5.21

工具版本兼容问题
用到的图片在右侧
纠


步骤 1 :

练习-综合练习1

edit 顶 折
纠 问
练习-综合练习1


HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。


问答区域    
2024-11-18 第一行怎么才能做到垂直对齐呢，试了好久也没有试出来
qugengting

关于 前端部分-CSS-综合性练习1 的提问
如题，答案里面没有对齐，我想做个对齐，结果做不出来





回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
答案 或者 代码 请至少填写一项, 如果是自己有问题，请重新提问，否则站长有可能看不到



2024-07-24 CSS 布局综合练习1
虚心求学

关于 前端部分-CSS-综合性练习1 的提问



文件路径和组成: 类别 路径 html 文件： 根目录\.html CSS 文件： 根目录\CSS\style.css img 文件： 根目录\img\
加载中 
------------------------ css文件 ----------------------------

div.blogItem{
    margin-top:80px;
    margin-left:80px;
    width: 47%;
    border-bottom:1px solid #eee;
}
div.top{
    font-family:宋体;
    height : 30;
    margin-bottom:15px;
    border-bottom:1px solid #c0c0c0;
    font-size:12px;
}
div.topL{
    font-weight:bold;
    float:left;
    top:40;
    left:40;
}
div.topR{
    float:right;
    top:40;
    right:15%;
}
div.topR img{	
    float:left;
    margin-right:5px;	
}
div.topL img{	
    margin-right:12px;	
}
div.head{
    margin-right:15;
    float:left;
    width:38px;
    height:38px;
}
div.exit{
    margin-right:10px;
    float:right;
}
a{
    color:#369;
    text-decoration:none;
}
p.label{
    font-family:微软雅黑;
    font-size : 13px; 
    margin-top:-1;
    margin-bottom:-1px;
}
p.title{
    font-family:微软雅黑;
    font-weight:bold;
    font-size : 14px;
    margin-top : 3;
    letter-spacing:0.4;
}

div.count{
    font-size : 10px;
    padding:5px;
    position:relative;
    height:20;
    width:45px;
    float:left;
}
div.absCount{
    position:absolute;
    left : 0;
    top:0;
}
font.num{
    font-family:宋体;
    font-size:12.5px;
    position:relative;
    color:#777;
    padding-down:1;
}
p.author{
    font-size : 12px;
}
div.picture{
    clear:left;
    margin-left:50px;
    margin-right:15px;
    float : left;
}
div.content{
    font-size : 13px;
    font-family:宋体; 
    line-height : 165%;
}
div.extend{
    clear:left;
    margin-top:25px;
    margin-left:45px;
    color:#a9a9a9;
    font-size:13px;
    margin-bottom:25px;
}
div.extend img{
    margin-left:3px;
    margin-right:5px;
}

<!--------------------- html 文件 ------------------------->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<link rel = "stylesheet" type = "text/css" href = "./css/style.css"/>


<div class = "blogitem">

    <div class = top>
       <div class="topL"><img src = "./img/1.png"/><span>最新动态<span></div>
       <div class="topR"><img src = "./img/2.png"/>设置</div>
    </div>

    <div class = "head">
        <img src = "./img/4.png">
    </div>
    <div class = "exit">
        <img src = "./img/3.png"/>
    </div>

    <div class="headline">
        <p class = "label">热门回答，来自&nbsp;&nbsp;机械&nbsp;&nbsp;
        <a class="careLink" href="#nowhere">关注话题</a></p>
        <p class = "title"><a class="careLink" href="#nowhere">人类史上令人叹为观止的极限精度制造成果有哪些？</a></p>
    </div>

    <div class = "count">
        <div class = "absCount">
            <img class = "cbg" src = "./img/5.png"/>
        </div>
        <font class = "num">6551</font>
    </div>
    <p class = "author"><strong>Vincent Fu</strong>,&nbsp;&nbsp;Materials Science,&nbsp;&nbsp;PhD</p>

    <div class = "picture">
        <img src = "./img/6.png"/>
    </div>
    <div class = "content">
         说到精度，就不得不提在材料学中最重要的一个方面：表征。要想研究一种材料的性能，
         握在手里把玩是远远不够的，就算拿放大镜离近了看，也只能看到表面的一些坑坑洼洼，
         而为了知晓一种材料的纤维结构，科学家至少要到纳米级（放大千倍），如果要获得更深...
        <a href="#nowhere">显示全部</a>
    </div>

    <div class = "endline">
        <div class="extend">
            <span><img src = "./img/7.png"/>关注问题</span>
            <span><img src = "./img/8.png"/>867条评论</span>
            <span><img src = "./img/9.png"/>作者保留权利</span>
        </div>
    </div>

</div>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<link rel = "stylesheet" type = "text/css" href = "./css/style.css"/>


<div class = "blogitem2">

    <div class = top>
       
    </div>

    <div class = "head">
        <img width="38px" height = "38px" src = "./img/cjjsj.jpg">
    </div>
    <div class = "exit">
        <img src = "./img/3.png"/>
    </div>

    <div class="headline">
        <p class = "label">较早回答，来自&nbsp;&nbsp;科幻&nbsp;&nbsp;
        <p class = "title"><a class="careLink" href="#nowhere">当今最先进的超级计算机拥有什么样的算力？</a></p>
    </div>

    <div class = "count">
        <div class = "absCount">
            <img class = "cbg" src = "./img/5.png"/>
        </div>
        <font class = "num">Each</font>
    </div>
    <p class = "author"><strong>Capnent Lio</strong>,&nbsp;&nbsp;<strong>Dr.Kesion Join</strong>,&nbsp;&nbsp;Global Science,&nbsp;&nbsp;GBS</p>

    <div class = "picture">
        <img src = "./img/cjjsj.jpg" width = "200px" height = "112px"/>
    </div>
    <div class = "content">
        人类历史上，第一台电子计算机——ENIAC（中文名:埃尼阿克）诞生于
诞生于1946年2月14日，人类诞生至今大约500万年就产生了计算机科学，
现如今超级计算机、量子计算机、生物计算机等先进的计算机诞生...
        <a href="#nowhere">显示全部</a>
    </div>

    <div class = "endline">
        <div class="extend" >
            <span><img src = "./img/7.png"/>关注问题</span>
            <span><img src = "./img/8.png"/>55条评论</span>
            <span><img src = "./img/9.png"/>作者保留权利</span>
        </div>
    </div>

</div>

<!--------------------- 资源 文件 ------------------------->

相对根目录：
CSS   ./CSS/style.css
IMG   ./img/1.png


							

						
				
					
						
			

		

	
		











2 个答案 
	

	
	

		
		


				
				
		
		
		
				虚心求学 
					

					
				
				

				
				
					答案时间：2024-07-24
				
				
				
		
		
			
    当某行的 div 使用 float left 时，后续的普通元素会从最左侧开始尝试占用该行，但是发现最左侧的坑被 浮动的 div 占 用了，于是只能让出这一块向右边移动，但是如果剩下的空间不足了，后续的普通元素会不断换行（不停尝试占用下一行），直到空间足够为止。

    然而 div 则默认不会让坑！如果已经定义了一个 往左浮动 的 div ，后续再定义的一个 div （如果不设置浮动的话），默认会把该行全部占满（width：100%）；

    如果想要后续加入的 div 自适应剩下的空间（让出前一个浮动元素占用的位置），则需要将后续加入的 div 定义为 float：left，否则还是会占满整行。

    这道题目有一块 内容较多的 正文部分，站长定义为 div 同时 浮动 很好地实现了 文本和图片的位置关系（文字浮于图片右侧）。但我还发现一种方法，可以不定义浮动，同样也可以实现这种位置关系，而且后续可以自动换行（div float 之后不会自动换行，后续元素想换行需要额外添加一个<br/>标签），不使用 div 实现的思路如下：

    改用 p 标签来定义一个段落元素，里面放正文内容，而 p 默认是会自动换行的，而且是自适应文本大小的，同时加入 p 时，会主动让出 左侧被浮动元素所占用的空间，实现文字浮于图片右侧的位置关系。

参考站长的答案并修改后的代码如下：

		

							
		
			
			
		
		
		
			
		
		
	

		
		


				
				
		
		
		
				虚心求学 
					

					
				
				

				
				
					答案时间：2024-07-24
				
				
				
		
		
			
本题代码

		

							
		
			
			
		
		
		
			
		
		
	
	
	












	






		
		
		
		
		














	

		回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢	
	






		

		

		答案 或者
		代码
			 请至少填写一项, 如果是自己有问题，请重新提问，否则站长有可能看不到
		

		
		

		

			

				
				
					
					

						
			

			

				
				
					
					

						
			

		

		
			
		

			
			

			
		

		
					
	


			







		
	
		
		
		
			

			

		
		
	    
	    
	  

	

	
	
	
	

	
	
	


	

	  

	  		
	  
	  	2022-12-06
	  		
	  				
	  					 
	  
					
						这样应该还好 
					
					
						
							
						
											
							
					
					

					
	  

	  
	  
	  	    
	    
	  

	

	
	
	
	

	
	
	


	

	  

	  		
	  
	  	2022-11-22
	  		
	  				
	  					 
	  
					
						写成这样，算是屎山吗？TAT 
					
					
						
							
						
											
							
					
					

					
	  

	  
	  
	  	    
	    
	  

	

	
	
	
	

	
	
	


	

	  

	  		
	  
	  	2022-08-04
	  		
	  				
	  					 
	  
					
						我这个算是好理解一点的了吧，修修补补用了点时间 
					
					
						
							
						
											
							
					
					

					
	  

	  
	  
	  	    
	    
	  

	

	
	
	
	






	






			
			
			
			
			









提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 61 条以前的提问，请 点击查看 


			













		

			
		

		

			
			提问之前请登陆
			
		





	

		提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢	
	






		

		
关于
		 
		前端部分-CSS-综合性练习1 
		
		 的提问

		

		
		
		

		
尽量提供截图、代码和异常信息，有助于分析和解决问题。
		
		
		
		
			也可进本站QQ群交流: 578362961
			


				提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。

				对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度 

				在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。

				请使用和站长一样的版本，可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了，都统一放在了这里， 方便大家下载：
				https://how2j.cn/k/helloworld/helloworld-version/1718.html
				 
				
				
				
				 



			

		 
		
		
		
		

		

		

			

				
					
						上传截图