Question

我试图创建一个包含图像/文本的div的网站，布局看起来像这样：

（我不能发布超过2个链接，因此文本示例.divs居中。）

-
- -
- -
- -

当我使浏览器变小时，div应该排在彼此之下，如下所示：

但是我的代码看起来像这样：

我尝试了各种各样的东西，但没有一个导致第一个div在两种情况下完全对齐。

html来源：

<!DOCTYPE html>
<html>
 <head>
     <link rel="stylesheet" type="text/css" href="style.css">
     <title>Sinterklaas website</title>
 </head>
 <body style="background-color:black">
     <center><div class = "secondary"></div></center>
     <center>
         <div class="main">
             <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
                 <tr>
                     <td colspan="2" height="180px">
                         <a href="http://www.google.nl">
                             <img style="display:block;" width="100%" height="100%" src="arduino.jpg" />
                         </a>
                     </td>
                 </tr>
                 <tr>
                     <td colspan="1" bgcolor="blue" width="220px"></td>
                     <td bgcolor="green"></td>
                 </tr>
             </table>
         </div>
         <div class="main" id="second">
             <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
                 <tr>
                     <td colspan="2" height="180px">
                         <a href="http://www.google.nl">
                             <img style="display:block;" width="100%" height="100%" src="arduino.jpg" />
                         </a>
                     </td>
                 </tr>
                 <tr>
                     <td colspan="1" bgcolor="blue" width="220px"></td>
                     <td bgcolor="green"></td>
                 </tr>
             </table>
         </div>
     </center>
     <center>
         <div class="main"></div>
         <div class="main"></div>
     </center>
     <center>
         <div class="main"></div>
         <div class="main"></div>
     </center>
  </body>

来源：

body {
    background-image: url("background.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}



.main {
  background-color: red;
  display: inline-block;
  position: relative;
  width: 300px;
  height: 225px;
  margin: 15px;
}

.secondary {
  background-color: red;
  position: relative;
  display: inline-block;
  left: -165px;
  width: 300px;
  height: 70px;
  margin: 0 auto;
}

.test {
  background-color: red;
  display: inline-block;
  position: relative;
  width: 300px;
  height: 260px;
  margin: 30px;
}

.empty {
  position: relative;
  display: inline-block;
  background-color: red;
  width: 300px;
  height: 0px;
}

#first {
}

#second {
  background-image: url("arduino.jpg");
  background-size: 100% 100%;
}

#third {

}

#fourth {

}

#fifth {

}

#sixth {

}

真的很感激任何帮助！

Answer 1

我清理了你的html代码并取出你的桌子，这样就更容易看到结构了。

这是你想要的吗？

html, body {
  margin: 0;
}

body {
    background-color:black;
    background-image: url("background.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

.wrapper {
  margin: 0 auto;
  min-width: 335px;
  max-width: 670px;
  text-align: center;
}

.main {
  background-color: red;
  display: inline-block;
  position: relative;
  width: 300px;
  height: 225px;
  margin: 15px;
}

.top {
  height: 70px;
}

@media (min-width: 680px) {
  .left {
    text-align: left;
  }
}

<div class="wrapper left">
  <div class="main top"></div>
</div>

<div class="wrapper">
  <div class="main"></div>
  <div class="main" id="second"></div>
  <div class="main"></div>
  <div class="main"></div>
  <div class="main"></div>
</div>

Answer 2

要回答对齐难题，请从left中删除secondary属性。

但这只是一个简单的修复，你有许多对你不利的元素布局决策。我在这里为你写了一个修补程序，我认为这将有助于简化正在发生的事情：

添加了center-horizontally类来包装所有内容。
使CSS代码相关且可读。
删除了CSS中的冗余代码。

编辑（在评论中阅读）：

更改了HTML以包含div以包裹.secondary div，现在整个行都可以使用。
更改.center-horizontally CSS以调整为全宽和小屏幕尺寸。
使用CSS的有用link to learn about layout，非常有趣且相关。您也可以在codepen，jsfiddle以及更多

body {
    background-image: url("background.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-color: black;
}
.empty, .main, .secondary {
    position: relative;
    display: inline-block;
    width: 300px;    
    margin: 0 auto;
}
.main {
    background-color: red;
    height: 225px;
    margin: 15px;
}
.main > table {
    border: 0;
    width: 100%;
    height: 100%;
}
.secondary {
    background-color: pink;
    height: 70px;
}
.test {
    height: 260px;
    margin: 30px;
}
.empty {
    height: 0px;
}
#second {
    background-image: url("arduino.jpg");
    background-size: 100% 100%;
}
.center-horizontally {
    min-width: 330px;
    width: 100%;
    text-align: center;
}
.center-horizontally .row{
    width: 100%;
}

<div class="center-horizontally">
        <div class="row">
            <div class="secondary"></div>
        </div>
        <div class="main">
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <td colspan="2" height="180px">
                        <a href="http://www.google.nl">
                            <img style="display:block;" width="100%" height="100%" src="arduino.jpg" />
                        </a>
                    </td>
                </tr>
                <tr>
                    <td colspan="1" bgcolor="blue" width="220px"></td>
                    <td bgcolor="green"></td>
                </tr>
            </table>
        </div>
        <div class="main" id="second">
            <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
                <tr>
                    <td colspan="2" height="180px">
                        <a href="http://www.google.nl">
                            <img style="display:block;" width="100%" height="100%" src="arduino.jpg" />
                        </a>
                    </td>
                </tr>
                <tr>
                    <td colspan="1" bgcolor="blue" width="220px"></td>
                    <td bgcolor="green"></td>
                </tr>
            </table>
        </div>
        <div class="main"></div>
        <div class="main"></div>
        <div class="main"></div>
        <div class="main"></div>
    </div>

如果您需要进一步解释，请与我们联系。

html和css div放置

2 个答案: