Question

我正在使用html和css在我的第一个网站上工作。对于投资组合区域/工作区域，我希望在它们旁边有三个图像和三个描述，但我想要替换它们。例如，我的第一行将在左侧显示图像，在右侧显示文本。我的第二行将在左侧显示文本，在右侧显示图像，我的第三行将与第一行相同。我根本不知道这样做的最好方法，任何人都可以帮我实现这个布局，因为我只是想添加越来越多不必要的代码，因为我不知道我在做什么。

HTML：

   <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="David Espejo">
    <meta name="description" content="Providing small businesses and individuals websites using wordpress">
    <meta name="keywords" content="web,design,wordpress,HTML,CSS,PHP">
    <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- for mobile devices -->
    <title>DEdesigns</title>
    <script src="html5shiv.js"></script>    <!-- allows html 5 styling -->
    <link rel="stylesheet" href="normalize.css"> <!-- a modern CSS reset -->
    <link rel="stylesheet" href="style.css"> 
</head>
<body>
<div id="container">
    <header id="main-header">
        <h1>DEdesigns</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header> <!-- end #main-header -->
    <article id="about-me">
        <h1>About Me</h1>
            <figure>
                <img src="http://people.mozilla.com/~faaborg/files/shiretoko/firefoxIcon/firefox-128-noshadow.png" width="" height="">
                <figcaption>An image of myself</figcaption>
            </figure>
            <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
                galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but
                also the leap into electronic typesetting, remaining essentially unchanged
            </p>
            <input type="submit" value="Call Me">
    </article> <!-- end #about-me -->
    <article id="gallery">
        <h1>My Work</h1>
        <div id="gallery-container">
            <div class="row-one clear-fix">
                <figure>
                    <img src="http://people.mozilla.com/~faaborg/files/shiretoko/firefoxIcon/firefox-128-noshadow.png" width="#" height="#">
                    <figcaption>SalonSociel website</figcaption>
                </figure>
                <p>
                    A descripton of the website. A descripton of the website. A descripton of the website. A descripton of the website.
                    A descripton of the website. A descripton of the website. A descripton of the website. A descripton of the website.
                </p>
            </div>
            <!--  ends first row -->
            <div class="row-two clear-fix">
                <p>
                    A descripton of the website. A descripton of the website. A descripton of the website. A descripton of the website.
                </p>
                 <figure>
                    <img src="http://people.mozilla.com/~faaborg/files/shiretoko/firefoxIcon/firefox-128-noshadow.png" width="#" height="#">
                    <figcaption>JJ and Sons Electric website</figcaption>
                </figure>
            </div>
            <!-- ends second row -->
            <div class="row-three clear-fix">
                <figure>
                    <img src="http://people.mozilla.com/~faaborg/files/shiretoko/firefoxIcon/firefox-128-noshadow.png" width="#" height="#">
                    <figcaption>Thetwoedgesword website</figcaption>
                </figure>
                <p>
                    A descripton of the website. A descripton of the website. A descripton of the website. A descripton of the website.
                </p>
            </div>
            <!-- ends third row -->
        </div> <!-- ends #gallery-container -->
    </article> <!-- end #gallery -->
    <article id="services">
        <h1>Services</h1>
         <ol>
            <li>one</li>
            <li>two</li>
            <li>three</li>
        </ol>
    </article> <!-- end #services -->
    <article id="contact-me">
        <h1>Contact Me</h1>
        <p>some contact me stuff goes here</p>
    </article> <!-- end #contact-me -->
    <footer>
        <p>This is my fotter</p>
    </footer>    
</div> <!-- end #container -->
</body>
</html>

CSS：

   #container {
    width: 100%;
    background: #4de8d0;
    border: 1px solid black;
    font: 1em/2 sans-serif;
    margin-top: 50px;
}


#main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: black;
    color: white;
    font-size: 0.85em;
    line-height: 1.2;
}

#main-header h1 {
    float: left;
    margin: 10px 30px;
}

nav ul {
    display: table;
    margin: 0;
    padding-left: 0;
}

nav, nav li {
    display: inline-block;
}

nav {
    display: table;
    background: #c3c3c3;
    height: 50px;
}

nav a {
    display: table-cell;
    height: 50px;
    vertical-align: middle;
    padding: 0px 20px;
    border-right: 1px solid black;
}

h1, h2 { text-align: center; }



#about-me {
    margin: 0 auto;
    width: 100%;
    background-color: #32c6cd;
    color: white;
    border-bottom: 10px solid black;
    text-align: center;
}

#about-me figure {
    text-align: center;
}

#about-me p {
    margin: 0 auto;
    width: 60%;
    padding: 0 5%;
}

#gallery-container {
    width: 60%;
    margin: 0 auto;
    background: #c3c3c3;
    border: 1px solid red;
}

#gallery-container figure {
    width: 25%;
    text-align: center;
}

#gallery-container p {

}


.row-one, .row-two, .row-three {
    border: 1px solid green;
    background: lightblue;
}



.clear-fix {
    overflow: auto;
    zoom: 1;
}

.row-one figure {
    float: left;
    background: blue;
}

.row-one p {

}

.row-two figure {
    float: right;
    background: blue;
}

.row-one p {
    background: red;
    padding: 3%;
}

.row-two figure {
    width: 25%;
    float: right;
    background: red;
}

.row-two p {
    background: red;
    padding: 3%;

}

Answer 1

尝试查看CSS nth-child选择器。例如，您可以查看以下代码段。 w3 Schools CSS3 Nth-Child Selectors

<div class="container">
    <div class="row galRow">
        <div class="galRowImage">
            <img src="#" alt=""/>
        </div>
        <div class="galRowText">some text</div>
    </div>
    <div class="row galRow">
        <div class="galRowImage">
            <img src="#" alt=""/>
        </div>
        <div class="galRowText">some text</div>
    </div>
    <div class="row galRow">
        <div class="galRowImage">
            <img src="#" alt=""/>
        </div>
        <div class="galRowText">some text</div>
    </div>
</div>
<style>
    .container{
        width: 400px;
    }
    .galRow:nth-child(even) .galRowImage, .galRow:nth-child(odd) .galRowImage{
        float: left;
    }   
    .galRow:nth-child(even) .galRowImage, .galRow:nth-child(odd) .galRowImage{
        float: right;
    }
</style>

Answer 2

与kishanW所说的相似。您可以使用nth-child伪选择器，具体取决于您的浏览器支持：

以下是您的HTML的工作示例，我刚添加了一个行类并删除了第一行等等...

＆＃13;

.clear-fix {
  overflow: auto;
  zoom: 1;
}
#gallery-container {
  width: 80%;
  margin: 0 auto;
  background: #c3c3c3;
  border: 1px solid red;
}
#gallery-container .row {
  padding: 2.5%;
}
#gallery-container .row figure {
  background: #00F;
  width: 25%;
  text-align: center;
}
#gallery-container .row p {
  background: #F00;
  width: 67.5%;
  padding: 2.5%;
  margin: 0;
}
#gallery-container .row:nth-child(odd) figure {
  float: left;
  margin: 0 2.5% 0 0;
}
#gallery-container .row:nth-child(odd) p {
  float: left;
}
#gallery-container .row:nth-child(even) figure {
  float: right;
  margin: 0 0 0 2.5%;
}
#gallery-container .row:nth-child(even) p {
  float: left;
}

＆＃13;

<div id="gallery-container">
  <div class="row clear-fix">
    <figure>
      <img src="http://people.mozilla.com/~faaborg/files/shiretoko/firefoxIcon/firefox-128-noshadow.png" width="#" height="#">
      <figcaption>SalonSociel website</figcaption>
    </figure>
    <p>
      A descripton of the website. A descripton of the website. A descripton of the website. A descripton of the website. A descripton of the website. A descripton of the website. A descripton of the website. A descripton of the website.
    </p>
  </div>
  <!--  ends first row -->
  <div class="row clear-fix">
    <p>
      A descripton of the website. A descripton of the website. A descripton of the website. A descripton of the website.
    </p>
    <figure>
      <img src="http://people.mozilla.com/~faaborg/files/shiretoko/firefoxIcon/firefox-128-noshadow.png" width="#" height="#">
      <figcaption>JJ and Sons Electric website</figcaption>
    </figure>
  </div>
  <!-- ends second row -->
  <div class="row clear-fix">
    <figure>
      <img src="http://people.mozilla.com/~faaborg/files/shiretoko/firefoxIcon/firefox-128-noshadow.png" width="#" height="#">
      <figcaption>Thetwoedgesword website</figcaption>
    </figure>
    <p>
      A descripton of the website. A descripton of the website. A descripton of the website. A descripton of the website.
    </p>
  </div>
  <!-- ends third row -->
</div>
<!-- ends #gallery-container -->

＆＃13;

在我的网站上处理浮动

2 个答案: