3箱div

时间：2016-11-11 09:11:35

标签： html css

我创建了名为AboutUs.html的html页面。我的任务是完成页面，但是有一个问题。我希望将这三个框水平对齐：

correct output

但是我尝试使用一些CSS代码，但仍然无法在水平方向上对齐。

输出错误：

click here

我想要留下第一个方框，第二个方框是中心，第三个方框是正确的。任何人都可以帮我解决这个问题。

这是About.html代码：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Two Trees Creative - About Us </title> 

     <link rel="stylesheet" href="_stylesheets/Css_Reset.css"/>

    <link rel="stylesheet" href="_stylesheets/mystyle.css"/>
</head>
    <body>
<div id="wrapper">
    <header>
        <a id="logo" href="#">Two Tree Creative</a>
        <nav id="mainNav">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="About.html">About Us</a></li>
                <li><a href="Portfolio.html">Portfolio</a></li>
                <li><a href="Contact.html">Contact</a></li>
            </ul>
        </nav>

    </header>
        <section id="welcome">

            <h1>Designing your world</h1>
            <p>One pixel at a time</p>
        </section>

        <section id="about">
            <h2>About us</h2>
            <article id="about_info">
            <p>Two Trees Creative is a full-service graphic design agency based in Ventura, CA. Our goal is to provide elegant work and unsurpassed customer service to our clients in every way.</p>
            <h3>Meet Our Team of Creatives</h3>
            <p>Collectively we have over 15 years experience in the graphic design industry, and our services include brand identity development, business cards, brochures, flyers, catalogs, and more. Thank you for considering us for your next project, and we hope to hear from you soon.</p>
            </article>

        <aside id="about_team">
          <div class="row">
          <div class="image">
            <img src="_images/team/alex_morrales.jpg" alt="Alex Morrales" width="150" height="150">
              <p>Alex Morrales</p>
          </div>

          <div class="image">
            <img src="_images/team/david_kim.jpg" alt="David Kim" width="150" height="150">
              <p>David Kim</p>
          </div>

          <div class="image">
            <img src="_images/team/jenny_tabers.jpg" alt="Jenny Tabers" width="150" height="150">
              <p>Jenny</p>
          </div>
        </div>

        <div class="row"></div>
        </aside>

        </section>





    <footer>
        <p>Photoshop adapted from www.lynda.com - Photoshop CC for Web Designed by Justin Seeley</p>
    </footer>

</div>


</body>
</html>

对于mystyle.css代码，在about_team id元素下，我需要编写代码以使3框水平对齐。

#wrapper {
    max-width: 1280px;
    margin: auto;

}

/*header*/
header {
    background-color: white;
    width:100%;
    height: 165px;
    text-align: center;
    margin-top: 60px;
}

#logo {
    background: url(../_images/ttc_logo.png) no-repeat;
    width: 85px;
    height: 85px;
    margin: auto;
    margin-bottom: 0px;
    display: block;
    text-indent: -9999px;
}

#welcome 
{
    background: url(../_images/banner.jpg);
    width:100%;
    height:650px;
    overflow:hidden;
    text-align:center;
    color:white;
    vertical-align:middle;

}


#welcome h1
{
    font-size:4em;
    font-family:'Adobe Garamond , serif';
    padding-top:200px;
    text-transform:uppercase;
}
#welcome p
{
    font-size:3em;
    font-family:'Adobe Garamond , serif';
    font-style:italic;
    font-weight:bold;

}

#about
{
    margin:auto;
    height:550px;
    background-image:url(../_images/tree1.gif), url(../_images/tree1.gif);
    background-position:-150px, 115%;
    background-repeat:no-repeat, no-repeat;
}

#about h2
{
    text-align:center;
    text-transform: uppercase;
    font: 3em 'Adobe Garamond, serif';
    font-weight:bold;
    padding-top:50px;
    margin-bottom:25px;
    color:rgb(82, 71,65);
}

#about h3
{
    font:36px Arial, sans-serif;
    margin-top:60px;
    margin-bottom:10px;
    color:rgb(134,118,92);
}

#about_info{
    float:left;
    margin: 0 auto;
    padding-top:37px;
    width:40%;
    height:400px;
    padding-left:125px;
}

#about_team
{
    float:left;
    margin: auto;
    height:400px;
    padding-top:37px;
    padding-left:20px;
}




#mainNav{
    width: 680px;
    margin: auto;
}

#mainNav ul li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: inline;
}
#mainNav li a:link{
    text-align: center;
    display: block;
    float: left;
    width: 110px;
    text-decoration: none;
    text-transform: uppercase;
    color: #5b866b;
    margin: 20px 20px;
    height: 20px;
    padding: 5px;
    border-radius: 5px;
}
#mainNav ul li a:hover,
#mainNav ul li a:focus

{
    background: rgb(185,140,72);
    color: white;
    box-shadow: 2px 3px 4px 0px #CC9933;
}

footer{
    background-color: #dee7e1;
    text-align:center;
    height:20px
    padding:20px;
    clear:both;

}

3 个答案:

答案 0 :(得分：0)

https://jsfiddle.net/ow6hc90f/1/

只需添加

.image {
float: left;
}

并从此

中删除浮动 
#about_team {
/* float:left; */
margin: auto;
height:400px;
padding-top:37px;
padding-left:20px;
}

答案 1 :(得分：0)

将width: 3 times (imageWidth+margin)添加到#about_team并将width: 150px和display: inline-block添加到.image。 font-size: 0中的#about_team用于删除inline-block元素之间的空格，您需要恢复.image中的大小。

#about_team {
  width: 480px;
  float: right;
  font-size: 0;
}

#about_team .image{
   display: inline-block; 
   width: 150px;
   margin-right: 10px;
   font-size: 14px;
}
  <aside id="about_team">
    <div class="row">
      <div class="image">
        <img src="https://avatars3.githubusercontent.com/u/1024025?v=3&s=400" alt="Alex Morrales" width="150" height="150">
        <p>Alex Morrales</p>
      </div>

      <div class="image">
        <img src="https://pbs.twimg.com/profile_images/558109954561679360/j1f9DiJi.jpeg" alt="David Kim" width="150" height="150">
        <p>David Kim</p>
      </div>

      <div class="image">
        <img src="http://a5.files.biography.com/image/upload/c_fit,cs_srgb,dpr_1.0,h_1200,q_80,w_1200/MTE5NDg0MDU0NTIzODQwMDE1.jpg" alt="Jenny Tabers" width="150" height="150">
        <p>Jenny</p>
      </div>

      <div class="image">
        <img src="http://a4.files.biography.com/image/upload/c_fit,cs_srgb,dpr_1.0,h_1200,q_80,w_1200/MTE1ODA0OTcxNjk3OTMxNzg5.jpg" alt="Jenny Tabers" width="150" height="150">
        <p>Jenny</p>
      </div>

      <div class="image">
        <img src="http://i142.photobucket.com/albums/r96/thisdayinmusic/PaulMcCartneyHandsomePaul.png" alt="Jenny Tabers" width="150" height="150">
        <p>Jenny</p>
      </div>

      <div class="image">
        <img src="http://static.giantbomb.com/uploads/original/8/84561/1465721-georgeharrison.jpg" alt="Jenny Tabers" width="150" height="150">
        <p>Jenny</p>
      </div>
    </div>
  </aside>

答案 2 :(得分：0)

您可以使用 CSS Flexbox 。让你的三个.image div换成父div（.image-block - 在我的情况下）。

请看 Codepen

这样的事情：

.image-block {
  display: flex;
  justify-content: center;
}

.image {
  margin-right: 10px;
  text-align: center;
}
<div class="image-block">
            <div class="image">
              <img src="http://placehold.it/200x200" alt="Alex Morrales" width="150" height="150">
                <p>Alex Morrales</p>
            </div>

            <div class="image">
              <img src="http://placehold.it/200x200" alt="David Kim" width="150" height="150">
                <p>David Kim</p>
            </div>

            <div class="image">
              <img src="http://placehold.it/200x200" alt="Jenny Tabers" width="150" height="150">
                <p>Jenny</p>
            </div>
          </div>

希望这有帮助！

相关问题
最新问题