Question

我在一个名为row的div中有三列，每列都在一个名为third-col的div中。我希望三列并排（内联），然后下一个div接触在它们下面。目前所有的div都在一个接一个的块中。

我遇到的另一个问题是我的家庭形象。当浏览器窗口未最大化时，我希望图像仍然延伸到页面底部。

＆＃13;

img {
  padding: 0;
  display: block;
  margin: 0 auto;
  max-height: 100%;
  max-width: 100%;
  text-align: center;
}

.row {
  padding: 0 20px;
  display: inline;    
}

.third-col {
  width: 30.3%;
  font-size: 16px;
  display: inline;
}

.col {
  float: left;
  box-sizing: border-box;
}

＆＃13;

<img class="center" src="homepage.jpg" alt="">
<section id="skills">
  <p class="header">My Skills</p>
  <div class="skillsContainer">
    <div id="row">
      <div class="third-col"> 
        <ul>
          <li>items</li>
        </ul>
      </div>
    </div>
  </div>
</section>

＆＃13;

Answer 1

对于background-image，您需要使用CSS设置它。这将允许它从一侧到另一侧，从上到下伸展。这是一个例子：

.body { margin: 0; padding: 0;}

.full-page-image {
  background-image: url(https://images.unsplash.com/photo-1489914099268-1dad649f76bf?auto=format&fit=crop&w=2850&q=80);
  background-size: cover; /* THIS MAKES THE IMAGE STRETCH TO ALWAYS COVER THE PAGE */
  background-position: center center;
  position: relative;
  width: 100%;
  height: 100vh; /* This is 100% of the height */
}

<div class="full-page-image"></div>

<h1>Page content goes here</h1>

对于行，我建议使用flexbox。以下是完整指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

这个想法是每行都是页面的100％。行内的内容将除以您想要的宽度。这是一个例子：

.row{
    padding: 0 20px;
    display: flex; /* Makes the sub-elements flex */
    flex-wrap: wrap; /* Forces flexbox to respect children width */
    align-items: stretch; /* Makes childs the same height */
}
.third-col{
    width: 33%;
    font-size: 16px;
    min-height: 40px;
}

<div class="row">
  <div class="third-col">Col 1</div>
  <div class="third-col">Col 2</div>
  <div class="third-col">Col 3</div>
</div>

<div class="row">
   <div>Other page content</div>
</div>

CSS分为列，图像拉伸到窗口

1 个答案: