Question

我正在开展一个学校项目，目前正在为网站创建产品页面......

我似乎无法将这些div容器并排放置。我已经尝试了一切。当我使用inline-block和float时，格式变得很时髦。有什么建议？提前谢谢！

我需要容器2和3并排

HTML：

<!DOCTYPE html>
<html>

<head>
    <title>Shopping Page</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="shortcut icon" type="image/png" href="images/favicongreen.png" />

</head>


<body>

    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a class="active" href="products.html">Products</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="cart.html">Shopping Cart</a></li>
        <li><img src="images/bolt2.png" width="40px" height="40px" /></li>

    </ul>

    <div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
        <h1>Products</h1>



        <div class="container">

            <div class="column1">
                <br>
                <br>
                <p><b>Electric Energy Electronics Product Index</b></p><br>




                <div class="container2">
                    <img src="images/solar.jpg" alt="Avatar" class="image">
                    <div class="overlay">
                        <div class="text">250PX Solar Panel<br> This solar panel is a great way to harness clean energy from the sun.</div>
                    </div>
                </div>


<br>


                <div class="container3">
                    <img src="images/flashlight.jpg" alt="Avatar" class="image">
                    <div class="overlay">
                        <div class="text">250PX Solar Panel<br> This solar panel is a great way to harness clean energy from the sun. This solar panel can handle up to 300 w outup</div>
                    </div>




                </div>


                 <div class="divider"></div>

                <div class="column2">
                    Shopping cart Div
                    <p>x</p>
                    <p>x</p>
                    <p>x</p>
                    <p>x</p>
                    <p>x</p>
                    <p>x</p>
                    <p>x</p>
                    <p>x</p>
                    <p>x</p>
                    <p>x</p>
                    <p>x</p>
                    <p>x</p>
                    <p>x</p>
                    <p>x</p>
                    <p>x</p>
                    <p>x</p>
                    <p>x</p>
                    <p>x</p>



                </div>










            </div>

</body>

</html>

CSS：

.divider {
    border-bottom: 6px solid black;
}


.container2 {
  position: relative;
  width: 15%;
  height: 15%;
  margin-left: 50px;
}

.container2:hover .overlay {
  bottom: 0;
  height: 100%;

}

.container3 {
  position: relative;
  width: 15%;
  height: 15%;
  margin-left: 50px;
  margin-bottom: 50px;

}

.container3:hover .overlay {
  bottom: 0;
  height: 100%;
}



.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #4CAF50;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
}






    .text {
  width: 80%;
  text-align: center;
  color: white;
  font-size: 15px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  font-family: roboto;
}






.container {
    overflow: hidden;
}
.column2 {
    float: center;
    background-color: grey;
    padding-bottom: 100%;
    margin-bottom: -100%;
    color: aliceblue;
    font-family: roboto;
    height: 500px;
    width: auto;
    overflow-y: auto;
}

.column1 {
    text-align: center;
    float: center;
    margin: 20px;
    background-color: #333;
    padding-bottom: 100%;
    margin-bottom: -100%;
    color:aliceblue;
    font-family: roboto;
    overflow-y: auto;
}


br {
    text-align: center;
}





a {
    text-decoration: none;
}



ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

li {
    color: darkgreen;
    font-size: 20px;
    font-weight: bold;
}
.active {
    background-color: #4CAF50;
}

Answer 1

我看到的问题是，1）容器2和容器3之间的<br>代码; 2）职位相对无关，请保持并排; 3）如果你需要保持div并排，最好有一个父div;

改变你的样式和html，以便并排显示容器2和容器3。

HTML：

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a class="active" href="products.html">Products</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="cart.html">Shopping Cart</a></li>
    <li><img src="images/bolt2.png" width="40px" height="40px" /></li>

</ul>

<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
    <h1>Products</h1>



    <div class="container">

        <div class="column1">
            <br>
            <br>
            <p><b>Electric Energy Electronics Product Index</b></p><br>



            <div class="row">
              <div class="container2">
                  <img src="images/solar.jpg" alt="Avatar" class="image">
                  <div class="overlay">
                      <div class="text">250PX Solar Panel<br> This solar panel is a great way to harness clean energy from the sun.</div>
                  </div>
              </div>
              <div class="container3">
                  <img src="images/flashlight.jpg" alt="Avatar" class="image">
                  <div class="overlay">
                      <div class="text">250PX Solar Panel<br> This solar panel is a great way to harness clean energy from the sun. This solar panel can handle up to 300 w outup</div>
                  </div>
              </div>
            </div>



             <div class="divider"></div>

            <div class="column2">
                Shopping cart Div
                <p>x</p>
                <p>x</p>
                <p>x</p>
                <p>x</p>
                <p>x</p>
                <p>x</p>
                <p>x</p>
                <p>x</p>
                <p>x</p>
                <p>x</p>
                <p>x</p>
                <p>x</p>
                <p>x</p>
                <p>x</p>
                <p>x</p>
                <p>x</p>
                <p>x</p>
                <p>x</p>



            </div>










        </div>

样式：

.row {
  overflow: hidden;
  margin-bottom: 50px;
}
.container2, .container3 {
  float: left;
  width: calc(50% - 50px);
  margin-left: 50px;
}
.container2:hover .overlay {
  bottom: 0;
  height: 100%;

}
.container3:hover .overlay {
  bottom: 0;
  height: 100%;
}

以下是代码笔：https://codepen.io/johnsackson/pen/bMVwBr

注意：请删除＆{39; <br>＆＃39;你在容器2和容器3之间写的

水平放置div图像

1 个答案: