


I would like to ask the experts about the problem of div css. _html/css_WEB-ITnose
请问高手,先看下代码:
home2.html:
home2.css代码:
body
{
width:1024px;
height:750px;
border:1px solid blue;
margin:0 auto;
padding:0;
display:block;
}
.div1
{
width:300px;
height:360px;
border:1px solid silver;
padding-top:2px;
}
.faceul
{
padding-left:0px;
margin-left:20px;
}
.faceul li
{
text-align:center;
float:left;
list-style-type:none;
padding:0px;
}
.faceul li img
{
margin-left:20px;
margin-right:15px;
width:50px;
height:50px;
border:1px solid black;
margin-bottom:3px;
}
.span1
{
margin-left:2px;
}
.font1
{
font-size:16px;
font-weight:bold;
margin-left:5px;
padding-top:10px;
color:black;
text-decoration:none;
}
.faceul li a
{
display:block;
text-decoration:none;
}
.span1 a
{
text-decoration:none;
float:right;
}
下面的代码在火狐浏览器中运行后,出现了问题:移动到第一个图片没有变成小手的状态,其他两个都能成功,另外就是,第一个div中的span的超链接中能正常浮动到右边显示,第二个就不能不知道是什么问题?
body{
width:1024px;
height:750px;
border:1px solid blue;
margin:0 auto;
padding:0;
display:block;
}
.div1
{
width:300px;
height:360px;
border:1px solid silver;
padding-top:2px;
}
.faceul
{
padding-left:0px;
margin-left:20px;
}
.faceul li
{
text-align:center;
float:left;
list-style-type:none;
padding:0px;
}
.faceul li img
{
margin-left:20px;
margin-right:15px;
width:50px;
height:50px;
border:1px solid black;
margin-bottom:3px;
}
.span1
{
margin-left:2px;
}
.font1
{
font-size:16px;
font-weight:bold;
margin-left:5px;
padding-top:10px;
color:black;
text-decoration:none;
}
.faceul li a
{
display:block;
text-decoration:none;
}
.span1 a
{
text-decoration:none;
float:right;
}
回复讨论(解决方案)
第一个div下面加一个清楚浮动
style=“clear:both”
第一个div下面加一个清楚浮动
style=“clear:both”
请问这是什么意思?
float(浮动)他使得指定元素脱离普通的文档流而产生的特别的布局特性,有时候我们需要这种特别的布局方式,但是在某些浏览器中将会影响其他的布局,为了使之不影响其他那么我们在用完之后要清除这个浮动style=“clear:both”
就是清除浮动的意思
clear 规定元素的哪一侧不允许其他浮动元素。
style=“clear:both” 作用的对象所在行不允许有其它模块浮动(即两侧都不允许浮动)。
如果一个Div中有多个Float对象,形如

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics



The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.

The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit
