Question

我正在为我学校的机器人团队建立一个网站。这是我第一次用html / css编写代码。出于某种原因，我的其他页面非常好地使用了边距，但是对于这个页面，我的＆＃34; margin-right＆＃34;元素不起作用。

<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index_style.css">
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<title>Team 3774 Homepage</title>
</head>
<body>

<div id="page">
<div class="Banner">
<a class="Banner_Link" href="www.robotichive3774.com">
<img src="/Images/Banner.png" height="200" width="1350" border="0">
</a>
</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 Aguilar</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>
 </div>


</body>
</html>

CSS

.Team_Bio
{
margin-left: 200px;
margin-right: 200px;
}



a.Banner_Link
 {
  padding:0 !important;
 }

 .Banner
{
height: 200px;
width: 1350px;
}



#page{
width: 1000px;
margin-left: 0px;
margin-right: 0px;
}

div
{
 font-family: 'Roboto Slab', serif;
}

.body
{
margin-left: 200px;
margin-right: 200px;
margin-top: 50px;
margin-bottom: 100px;
}
.Banner img 
{
vertical-align:top;
}

body
{
margin: 0;
}


.li_nav
{
float: left;
display:inline-block;
font-family: 'Roboto Slab', serif;
}

.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: 14px;
padding-left: 5px;
font-weight: bold;
color: #FFFFFF;
background-color: #990000;
text-align: center;
text-decoration: none;
font-family: 'Roboto Slab', serif;
}

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

.Team_Bio
{
min-width: 1350px;
}

 h2 
{
 font-size: 60px;
 text-align: center;
}

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

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

如果您想查看我正在谈论的内容，该网站是robotichive3774.com。

Answer 1

确实如此，HTML和CSS是一团糟，但正如你所说，你对此不熟悉。

布局问题与该元素内的团队成员部分的宽度有关。他们迫使它伸展开来。

我为团队成员重新编写了CSS。

首先删除每个团队成员的像素宽度，然后将其设置为基于百分比的宽度。

让团队成员的主要元素100％宽，这样它就会填满它所坐的容器。

然后将它们的信息和图片包装元素设置为49％。

将图片包装元素内的图像设置为100％并自动设置为高度。

在CSS文件中执行所有这些宽度等。

那应该可以解决你的问题。

最后，如果你要做花车放一个＆＃34;清理div＆＃34;在每个团队成员之后，如果强制低于上一次运行，则下一部分。否则事情会相互碰撞。

像这样：

<div class="clear"></div>

.clear { clear: both; }

最后，您应该只是简单的代码。有太多的课程等。所有团队成员部分都可以拥有相同的课程，因此您可以应用全局规则等。

为什么我的身体不接受我的边缘？

1 个答案: