如何制作容器行？

Question

我是 HTML 的新手，仍在学习，但我在连接行和 div 方面遇到困难。

我正在尝试制作类似这样的东西（下图）。我希望能够使其可点击并转到某个 link。他们都必须彼此相邻，但每个人都有自己的 link。我知道浮动是正确的选择，但我也可以使用网格吗？

我该怎么做？

非常感谢任何帮助，谢谢！

Answer 1

你必须在单个div。在每个 div 中，您必须拍摄两张图片并简单地进行设计。

例如：

<div class="row">
<div class="col-md-6">
    <a href="link1">
        <img src="img1">
        <h2></h2>
        <p></p>
    </a>
</div>
<div class="col-md-6">
    <a href="link2">
        <img src="img2">
        <h2></h2>
        <p></p>
    </a>
</div>

Answer 2

HTML

<div class="container">
        <div class="product">
            <div class="bg-white">
                <a href="">
                    <img class="img-fluid"
                        src="https://static.wixstatic.com/media/2c0034_5e484cb9921c41a8bde8eed74b3aa810~mv2.jpg"
                        alt="" /></a>
                <h1>Demo Heading</h1>
                <p>Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
        <div class="product">
            <div class="bg-white">
                <a href="">
                    <img class="img-fluid"
                        src="https://static.wixstatic.com/media/2c0034_84e67efc3df44e8ea8b6da006e6d1ba5~mv2.jpg"
                        alt="" /></a>
                <h1>Demo Heading</h1>
                <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor
                    sit amet.Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
    </div>

CSS

<style>
       * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .img-fluid {
        max-width: 100%;
        width: 100%;
        display: block;
        height: auto;
    }

    .container {
        margin: auto;
        max-width: 1200px;
        display: flex;
        flex-wrap: wrap;
        background-color: #f6f6f6;
        padding: 1rem;
    }

    .container .product {
        flex: 0 0 50%;
        padding: 0 1rem;
    }

    .container .product .bg-white {
        background-color: white;
        box-shadow: 0px 0px 15px 5px #ddd;
        height: 100%;
    }

    .container .product h1 {
        font-size: 1rem;
        padding: 0.5rem 1rem .1rem 0;
        border-bottom: 2px solid brown;
        display: inline-block;
        margin: 0 0 .5rem .5rem;
        text-transform: uppercase;
    }

    .container .product p {
        font-size: 1rem;
        padding: 0 1rem 0.5rem 0.5rem
    }
    </style>

Answer 3

这是一个两列布局的基本示例，在父级上使用 flex，在每个 flex-item 上使用 flex-basis: 50%;。

.flex-wrapper {
  display: flex;
  justify-content: space-between;
}

.flex-item {
  text-align: center;
  flex-basis: 50%;
  padding: 10px;
  box-shadow: 0px 0px 6px 2px rgb(152 139 139 / 50%);
}

img {
  max-width: 100%;
}

<div class="flex-wrapper">
  <div class="flex-item">
    <img src="https://dummyimage.com/600x400/b52ab5/fff">
    <h6>Left column</h6>
  </div>

  <div class="flex-item">
    <img src="https://dummyimage.com/600x400/2a6b25/0011ff">
    <h6>Right column</h6>
  </div>
</div>

Answer 4

我创建了一个容器，它有 2 个孩子 (image-container, text-container)

在 image-container 内部，我使用背景图像覆盖容器，并创建了一个网格容器 (image-grid)，其中有 4 个相等的框架，书籍将留在其中。

比我给第二个和第四个孩子的边距

.image-grid img:nth-child(2){
  margin-top: 1rem;
}

.image-grid img:nth-child(4){
  margin-top: -1rem;
}

html{
  font-size: 25px;
}


img{
  display: block;
  max-width: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}



body{
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-content: center;
  margin:0;
  background-color: bisque;
  font-size: 20px;
}

.container{
  width:20rem;
  height:15rem;
  background-color: whitesmoke;
  box-shadow: 0 0 1rem black;
}


.image-container{
  background-image: url(https://source.unsplash.com/random/400x200);
  height: 70%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.image-grid{
  height: 50%;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap:1rem;
  margin-inline: 1rem;
}

.image-grid img:nth-child(2){
  margin-top: 1rem;
}

.image-grid img:nth-child(4){
  margin-top: -1rem;
}

.text-container{
  height: 30%;
  margin-block: 1rem;
  margin-left: 1rem;
}

.text-container h2{
  font-size: 0.7rem;
  text-transform: uppercase;
  text-decoration: underline;
}

.text-container p{
  margin-top: 0.5rem;
  font-size: 0.7rem;
}

<div class="container">
      <div class="image-container">
        <div class="image-grid">
          <img src="https://source.unsplash.com/random/600x900" alt="book1" />
          <img src="https://source.unsplash.com/random/600x900" alt="book2" />
          <img src="https://source.unsplash.com/random/600x900" alt="book3" />
          <img src="https://source.unsplash.com/random/600x900" alt="book4" />
        </div>
      </div>
      <div class="text-container">
        <h2>For Pachinko Fans</h2>
        <p>Get Lost in your nex epic family story</p>
      </div>
</div>

如何制作容器行？

How to make a container row?

html

css

flexbox

row

multiple-columns