Question

所以我的问题是父母有一些宽度，如果屏幕不适合所有孩子（浮动左边）一个在另一个下面（看起来很棒）所以我想要他们当他们一个在另一个下面是以父母为中心。

这是我的代码。我试过了inline-block但没有帮助等等

.mainpage-articles {
    float:left;
    width: 60%;
}

.mainpage-article {
    width: calc(800px + 8%);
    margin-left: auto;
    margin-right: auto;

}

.mainpage-article .thumbnail {
    position: relative;
    height: 200px;
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    padding: 2%;
    float: left;
}

.mainpage-article .thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.mainpage-article .article {
    height: 200px;
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    padding: 2%;
    float: left;
}

.mainpage-article .article h1 {
    height: 60px;
}

.mainpage-article .article p {
    height: 120px;
}

Answer 1

您可能想要学习媒体查询，以响应用户的屏幕。我对吗？如果是这样，请看一下：https://codepen.io/giovannipds/pen/BwqyLW

这是您想要学习的内容：

@media (max-width: 1500px) {
  .mainpage-articles {
    text-align: center;
  }
}

当用户窗口的最大值为1500px时，此代码将文本内容与中心对齐，高于不高于1500px的值。有许多方法可以应用媒体查询。我建议您 watch this 更好地学习它。

上述示例的完整代码：

<style>
  .mainpage-articles {
    background-color: #eee;
    float: left;
    width: 60%;
  }
  .mainpage-article {
    background-color: cyan;
    width: calc(800px + 8%);
    margin-left: auto;
    margin-right: auto;
  }
  .mainpage-article .thumbnail {
    background-color: yellow;
    position: relative;
    height: 200px;
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    padding: 2%;
    float: left;
  }
  .mainpage-article .thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  .mainpage-article .article {
    background-color: #ccc;
    height: 200px;
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    padding: 2%;
    float: left;
  }
  .mainpage-article .article h1 {
    height: 60px;
  }
  .mainpage-article .article p {
    height: 120px;
  }
  @media (max-width: 1500px) {
    .mainpage-articles {
      text-align: center;
    }
  }
</style>
<div class="mainpage-articles">
  <div class="mainpage-article">
    <div class="thumbnail">
      <img src="//lorempixel.com/400/200" alt="">
    </div>
    <div class="article">
      <h1>Lorem ipsum</h1>
      <p>Dolor sit amet.</p>
    </div>
  </div>
</div>

还有here的示例Bootstrap 4：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<style>
  .parent {
    background-color: yellow;
  }
  .smth-else {
    background-color: cyan;
  }
  .children {
    margin: 75px !important;
  }
  .children [class^=col-] {
    border: 1px solid red;
  }
</style>
<div class="container-fluid">
  <div class="row">
    <div class="parent col">
      <div class="children row">
        <div class="col-lg-6">
          Children col 1
        </div>
        <div class="col-lg-6">
          Children col 2
        </div>
      </div>
    </div>
    <div class="smth-else col">
      Smth else
    </div>
  </div>
</div>

你的代码不是那么漂亮，你应该让它们适应更好的媒体查询。

如果他们不适合父母，请将孩子居中

1 个答案: