Question

我正在为我学校的机器人团队开发一个网站，由于某种原因，我的div元素并没有保持最小宽度。每当我缩小网页时，它们会重叠并浮动到顶部。我该如何纠正？

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index_style.css">
<title>Team 3774: Team Bio</title>
</head>
<body>

<div class="Banner">
<img src="Banner.png" width="1350px" height="200">
</div>

<div class="navbar">
<ul class="nav">
  <li><a class="li_nav" href="/Home">Home</a></li>
  <li><a class="li_nav" href="/Team Bio">Team Bio</a></li>
  <li><a class="li_nav" href="/Our Robot">Our Robot</a></li>
  <li><a class="li_nav" href="/Our Coach">Our Coach</a></li>
  <li><a class="li_nav" href="/Gallery">Gallery</a></li>
  <li><a class="li_nav" href="/Outreach">Outreach</a></li>
  <li><a class="li_nav" href="/Youtube">Youtube</a></li>
</ul>
</div>

<div class="Team_Bio">
 <div class="example">
  <h2>Team Bio</h2>
   <h1>Example</h1>
    <ul>
     <li class="li_info">class</li>
     <li class="li_info">Role</li>
     <li class="li_info">Career Interests</li>
     <li class="li_info">Other Clubs and Sports</li>
    </ul>
 </div>

<div class="Abanoub_Boules">
    <div class="info_AB">
        <h1>Abanoub Boules</h1>
        <ul>
        <li class="li_info">Senior</li>
        <li class="li_info">Captian, Coder, Documenter</li> 
        <li class="li_info">CEO of a Biology Firm</li>
        <li class="li_info">Coptic Society</li>
        <li class="li_info">Technology Student Association</li>
        <li class="li_info">President of Stem Clubs</li>
        </ul>
   </div>
   <div class="picture_AB">
    <img src="Abanoub.jpg" width="350px" height="350px">
   </div>
  </div>



<div class="Andre_Bernardo">
    <div class="info_ABe">
        <h1>Andre Bernardo</h1>
        <ul>
        <li class="li_info">Senior</li>
        <li class="li_info">Engineer, 3D modeling</li>
        <li class="li_info">Computer Science</li>
        <li class="li_info">Tennis</li>
        <li class="li_info">Technology Student Association</li>
        </ul>
    </div>
    <div class="picture_ABe">
        <img src="Andre.jpg" width="350px" height="350px">
    </div>
   </div>


<div class="Leo_Scarano">
    <div class="info_LS">
        <h1>Leo Scarano</h1>
        <ul>
        <li class="li_info">Senior</li>
        <li class="li_info">Engineer, Coder</li>
        <li class="li_info">Computer Science</li>
        <li class="li_info">Technology Student Association</li>
        </ul>
    </div>
    <div class="picture_LS">
        <img src="Leo.jpg" width="350px" height="350px">
    </div>
 </div>

 <div class="Mina_Hanna">
    <div class="info_MH">   
        <h1>Mina Hanna</h1>
        <ul>
        <li class="li_info">Senior</li>
        <li class="li_info">Engineer, Coder</li>
        <li class="li_info">Pharmaceutics</li>
        <li class="li_info">Coptic Society</li>
        <li class="li_info">Technology Student Association</li>
        </ul>
    </div>
    <div class="picture_MH">
        <img src="Mina.jpg" width="350px" height="350px">
    </div>
 </div>

 <div class="Kenneth_Rebbecke">
    <div class="info_KR">   
        <h1>Kenneth Rebbecke</h1>
        <ul>
        <li class="li_info">Senior</li>
        <li class="li_info">Engineer, Documenter</li>
        <li class="li_info">Structual Engineering</li>
        <li class="li_info">Technology Student Association</li>
        </ul>
    </div>
    <div class="picture_KR">
        <img src="Kenny.jpg" width="350px" height="350px">
    </div>
 </div>

 <div class="Kristen_Kaldas">
    <div class="info_KK">
        <h1>Kristen Kaldas</h1>
        <ul>
        <li class="li_info">Senior</li>
        <li class="li_info">Coder, Bookkeeper</li>
        <li class="li_info">Biomedical Engineering</li>
        <li class="li_info">Science Seminar</li>
        <li class="li_info">Science Club</li>
        <li class="li_info">Technology Student Association</li>
        </ul>
    </div>
    <div class="picture_KK">
        <img src="Kristen.jpg" width="350px" height="350px">
    </div>
 </div>

 <div class="Melanie_Aguilar">
    <div class="info_MA">
        <h1>Melanie Agular</h1>
        <ul>
        <li class="li_info">Senior</li>
        <li class="li_info">Secratary, Mascot</li>
        <li class="li_info">Party Planner</li>
        <li class="li_info">Yearbook</li>
        </ul>
    </div>
    <div class="picture_MA">
        <img src="Melanie.jpg" width="350px" height="350px">
    </div>
 </div> 

 <div class="Anish_Patel">
    <div class="info_AP">
        <h1>Anish Patel</h1>
        <ul>
        <li class="li_info">Junior</li>
        <li class="li_info">Engineer, 3d modeling</li>
        <li class="li_info">Mechanical Engineer</li>
        <li class="li_info">Science Club</li>
        <li class="li_info">Junior Classical League</li>
        <li class="li_info">Certamn</li>
        </ul>
    </div>
    <div class="picture_AP">
        <img src="Anish.jpg" width="350px" height="350px">
    </div>
 </div>

 <div class="Furhan_Ashraf">
    <div class="info_FA">   
        <h1>Furhan Ashraf</h1>
        <ul>
        <li class="li_info">Junior</li>
        <li class="li_info">Financial Advisor, Engineer</li>
        <li class="li_info">Engineering/Undecided</li>
        <li class="li_info">Science Club</li>
        <li class="li_info">Technology Student Association</li>
        </ul>
    </div>
    <div class="picture_FA">
        <img src="Furhan.jpg" width="350px" height="350px">
    </div>
 </div>

 <div class="Andrew_W">
    <div class="info_AW">
        <h1>Andrew Wojtkowski</h1>
        <ul>
        <li class="li_info">Senior</li>
        <li class="li_info">Engineer, 3d Modeling</li>
        <li class="li_info">Aerospace Engineer</li>
        <li class="li_info">Varsity Hockey</li>
        <li class="li_info">Technology Student Association</li>
        </ul>
    </div>
    <div class="picture_AW">
        <img src="Andrew.jpg" width="350px" height="350px">
    </div>
 </div>

 <div class="Bryan_F">
    <div class="info_BF">
        <h1>Bryan Ferreira</h1>
        <ul>
        <li class="li_info">Senior</li>
        <li class="li_info">Engineer, Documenter</li>
        <li class="li_info">Computer Engineer/Civil Engineer</li>
        <li class="li_info">Guitar</li>
        <li class="li_info">Technology Student Association</li>
        </ul>
    </div>
    <div class="picture_BF">
        <img src="Bryan.jpg" width="350px" height="350px">
    </div>
</div>



 </div>

</body>
</html>

CSS

.li_nav
{
float: left;
display:inline-block;
}

.nav 
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden; 
min-width: 1350PX;  
}

a:link, a:visited 
{
display:inline-block;
width: 182.7px;
padding-top: 12px;
padding-right: 5px;
padding-bottom: 12px;
padding-left: 5px;
font-weight: bold;
color: #FFFFFF;
background-color: #990000;
text-align: center;
text-decoration: none;
}

a:hover, a:active 
{
background-color: #B20000;
}

.Team_Bio
{
min-width: 1350px;
}

 h2 
{
 font-size: 60px;
}

 .example 
{
  float: left;
  width: 1350px;
  height: 425px;
  margin: 0 auto;
}

 .Abanoub_Boules 
{
  float: left;
  width: 1350px;
  height: 500px;
  margin: 0 auto;
}

    .info_AB
    {
    float: left;
    width: 675px;
    height: 500px;
    }

    .picture_AB
    {
    float: right;
    width: 675px;
    height: 420px;
    }


 .Andre_Bernardo 
{
  float: left;
  width: 1350px;
  height: 425px;
  margin: 0 auto;
  }

    .info_ABe
    {
    float: left;
    width: 675px;
    height: 500px;
    }

    .picture_ABe
    {
    float: right;
    width: 675px;
    height: 425px;
    }
}

 .Leo_Scarano 
{
  float: left;
  width: 1350px;
  height: 400px;
  margin: 0 auto;
}

    .info_LS
    {
    float: left;
    width: 675px;
    height: 400px;
    }

    .picture_LS
    {
    float: right;
    width: 675px;
    height: 400px;
    }

 .Mina_Hanna 
{
  float: left;
  width: 1350px;
  height: 425px;
  margin: 0 auto;
}

    .info_MH
    {
    float: left;
    width: 675px;
    height: 425px;
    }

    .picture_MH
    {
    float: right;
    width: 675px;
    height: 425px;
    }

 .Kenneth_Rebbecke 
{
  float: left;
  width: 1350px;
  height: 400px;
  margin: 0 auto;
}

    .info_KR
    {
    float: left;
    width: 675px;
    height: 400px;
    }

    .picture_KR
    {
    float: right;
    width: 675px;
    height: 400px;
    }

 .Kristen_Kaldas 
{
  float: left;
  width: 1350px;
  height: 425px;
  margin: 0 auto;
}

    .info_KK
    {
    float: left;
    width: 675px;
    height: 425px;
    }

    .picture_KK
    {
    float: right;
    width: 675px;
    height: 425px;
    }

 .Melanie_Aguilar 
{
  float: left;
  width: 1350px;
  height: 400px;
  margin: 0 auto;
}

    .info_MA
    {
    float: left;
    width: 675px;
    height: 400px;
    }

    .picture_MA
    {
    float: right;
    width: 675px;
    height: 400px;
    }

 .Anish_Patel
{
  float: left;
  min-width: 1350px;
  height: 425px;
  margin: 0 auto;
}

    .info_AP
    {
    float: left;
    width: 675px;
    height: 425px;
    }

    .picture_AP
    {
    float: right;
    width: 675px;
    height: 425px;
    }

 .Furhan_Ashraf
{
  float: left;
  width: 1350px;
  height: 425px;
  margin: 0 auto;
}

    .info_FA
    {
    float: left;
    width: 675px;
    height: 425px;
    }

    .picture_FA
    {
    float: right;
    width: 675px;
    height: 425px;
    }

 .Andrew_W 
{
  float: left;
  width: 1350;
  height: 425px;
  margin: 0 auto;
}

    .info_AW
    {
    float: left;
    width: 675px;
    height: 425px;
    }

    .picture_AW
    {
    float: left;
    width: 675px;
    height: 425px;
    }

.Bryan_F
{
float: left;
width: 1350px;
height: 400px;
}

    .info_BF
    {
    float: left;
    width: 675px;
    height: 400px;
    }

    .picture_BF
    {
    float: right;
    width: 675px;
    height: 400px;
    }

 .li_info
{
  font-size: 25px;
}

该网站是robotichive3774.com，如果你想看看它，看看我的意思。它属于团队生物页面。

Answer 1

在开头添加div，如

<div id="page">

并将以下内容添加到您的css

#page{
width:1000px;
margin:auto;
}

http://jsfiddle.net/fmksn5qv/

为什么我的div不能保持最小宽度？

1 个答案: