css - html: div 搞砸了

Question

html文件是

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Patients Detailed Information Page</title>
<link  href="test.css" rel="stylesheet" />
</head>
<body>
<div id="container">
<div id="detailed_fistpart">
    <div id="detailed_div_image">
    </div>
    <div id="detailed_div_basicinfo">
        <div class="detailed_div_inner">
            <div class="detailed_div_captain"><strong>Basic Info</strong></div>
            <div>
                <table id="detailed_table_basicinfo">
                    <tr>
                        <td class="detailed_table_td"><font color="#9c9a9c">Name</font></td>
                        <td class="detailed_table_td"></td>
                    </tr>
                    <tr>
                        <td class="detailed_table_td"><font color="#9c9a9c">Gender</font></td>
                        <td class="detailed_table_td"></td>
                    </tr>
                    <tr>
                        <td><font color="#9c9a9c">Birthday</font></td>
                        <td></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div id="detailed_div_contactinfo">
        <div class="detailed_div_inner">
            <div class="detailed_div_captain"><strong>Contact Info</strong></div>
            <div>
                <table id="detailed_table_contactinfo">
                    <tr>
                        <td class="detailed_table_td"><font color="#9c9a9c">Phone</font></td>
                        <td class="detailed_table_td"></td>
                    </tr>
                    <tr>
                        <td class="detailed_table_td"><font color="#9c9a9c">Email</font></td>
                        <td class="detailed_table_td"></td>
                    </tr>
                    <tr>
                        <td><font color="#9c9a9c">Address</font></td>
                        <td></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

<div id="detailed_div_reminding">
    <textarea id="detailed_reminding"></textarea>
    <input type="button" class="button" value="update"></input>
</div>

</div>

</body>
</html>

这是我的css文件：

body{
margin:0;
padding:0;
}

#container{
width:900px;
margin:0 auto;
text-align:left;
position:relative;
filter:alpha(opacity=100);
opacity: 1.0;
}

#detailed_fistpart {
margin-top: 10px;
}

#detailed_image {
width: 200px;
height: 200px;
}

#detailed_div_basicinfo {
margin-left: 10px;
float: left;
background-color: #FFF;
border: 1px solid #c6cfde;
border-radius:7px;
}

.detailed_div_inner {
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}

.detailed_div_captain {
font-size: 20px;
height: 40px;
}

#detailed_table_basicinfo {
width: 193px;
height: 118px;
font-family:"Times New Roman", Times, serif;
font-size:14px;
}

.detailed_table_td {
border-bottom: 1px solid #efefef;
}

#detailed_div_contactinfo {
margin-left: 10px;
float: left;
background-color: #FFF;
border: 1px solid #c6cfde;
border-radius:7px;
}

#detailed_table_contactinfo {
width: 400px;
height: 118px;
font-family:"Times New Roman", Times, serif;
font-size:14px;
}

#detailed_div_reminding {
width: 900px;
}

#detailed_reminding {
width: 700px;
height: 70px;
}

.button {
background-color: #004584;
font-size:16px;
color: #FFF;
font-weight: bold;
}

当我使用firebug（扩展名）时，我可以看到它是 id=detailed_div_reminding 的 div 包括 id=detailed_div_basicinfo 的 div 和 id=detailed_div_contactinfo 的 div 而不是 id=detailed_fistpart 的 div。

一个问题是，如果你添加magin-top: 20px到#detailed_div_reminding，它不会产生边距#detailed_fistpart

为什么？

score 2 · Accepted Answer

您好，您需要添加此行 <div style="clear:both"></div>

在这行代码之前<div id="detailed_div_reminding">

score 1 · Accepted Answer

您的意思是您没有在最后一节中获得边距吗？这是因为您有浮动，并且您需要在后续部分清除它们。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Patients Detailed Information Page</title>
<link  href="test.css" rel="stylesheet" />
<style>
body{
margin:0;
padding:0;
}

#container{
width:900px;
margin:0 auto;
text-align:left;
position:relative;
filter:alpha(opacity=100);
opacity: 1.0;
}

#detailed_fistpart {
margin-top: 10px;
}

#detailed_image {
width: 200px;
height: 200px;
}

#detailed_div_basicinfo {
margin-left: 10px;
float: left;
background-color: #FFF;
border: 1px solid #c6cfde;
border-radius:7px;
}

.detailed_div_inner {
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}

.detailed_div_captain {
font-size: 20px;
height: 40px;
}

#detailed_table_basicinfo {
width: 193px;
height: 118px;
font-family:"Times New Roman", Times, serif;
font-size:14px;
}

.detailed_table_td {
border-bottom: 1px solid #efefef;
}

#detailed_div_contactinfo {
margin-left: 10px;
float: left;
background-color: #FFF;
border: 1px solid #c6cfde;
border-radius:7px;
}

#detailed_table_contactinfo {
width: 400px;
height: 118px;
font-family:"Times New Roman", Times, serif;
font-size:14px;
}

#detailed_div_reminding {
width: 900px;
margin-top:20px;
}

#detailed_reminding {
width: 700px;
height: 70px;
}

.button {
background-color: #004584;
font-size:16px;
color: #FFF;
font-weight: bold;
}
</style>
</head>
<body>
<div id="container">
<div id="detailed_fistpart">
    <div id="detailed_div_image">
    </div>
    <div id="detailed_div_basicinfo">
        <div class="detailed_div_inner">
            <div class="detailed_div_captain"><strong>Basic Info</strong></div>
            <div>
                <table id="detailed_table_basicinfo">
                    <tr>
                        <td class="detailed_table_td"><font color="#9c9a9c">Name</font></td>
                        <td class="detailed_table_td"></td>
                    </tr>
                    <tr>
                        <td class="detailed_table_td"><font color="#9c9a9c">Gender</font></td>
                        <td class="detailed_table_td"></td>
                    </tr>
                    <tr>
                        <td><font color="#9c9a9c">Birthday</font></td>
                        <td></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <div id="detailed_div_contactinfo">
        <div class="detailed_div_inner">
            <div class="detailed_div_captain"><strong>Contact Info</strong></div>
            <div>
                <table id="detailed_table_contactinfo">
                    <tr>
                        <td class="detailed_table_td"><font color="#9c9a9c">Phone</font></td>
                        <td class="detailed_table_td"></td>
                    </tr>
                    <tr>
                        <td class="detailed_table_td"><font color="#9c9a9c">Email</font></td>
                        <td class="detailed_table_td"></td>
                    </tr>
                    <tr>
                        <td><font color="#9c9a9c">Address</font></td>
                        <td></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

<div style="clear:both" ></div>

<div id="detailed_div_reminding">
    <textarea id="detailed_reminding"></textarea>
    <input type="button" class="button" value="update"></input>
</div>

</div>

</body>
</html>

css - html: div 搞砸了

2 回答 2

Related

Reference