html：div搞砸了

时间：2013-04-14 05:40:10

标签： css html firebug

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的保证金

为什么？

2 个答案:

答案 0 :(得分：2)

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

在此代码行<div id="detailed_div_reminding">

之前

答案 1 :(得分：1)

您的意思是说您没有获得上一部分的保证金吗？这是因为你有漂浮物存在，你需要清除它们以用于后续部分。

<!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>
相关问题
最新问题