当前位置： 文江博客话题详情

如何与CSS发出响应式网格

发布于 2025-02-11 06:22:07 字数 5135 浏览 1 评论 0原文

我想为这样的非营利组织制作网格 - image 。这是我的纯净 - html＆amp; CSS 。但是保证金填充并不相同，响应模式不行。另外，我认为我的代码不正确。我已经花了2天的时间制作一个完美的网格，例如 image 。

我如何解决布局，保证金填充，响应能力等？ 该网格的右CSS 是什么？

谢谢。

body {
                color: #000;
                font-family: 'Source Sans Pro', sans-serif;
            }

            h1, h2, h3, h4, h5, h6, p {
                font-family: 'Source Sans Pro', sans-serif;
            }

            .focus_area {
                width: 100%;
                display: inline-block;
            }

            .focus {
                width: 33.33%;
                float: left;
                position: relative;
                padding: 2px;
            }

            .focus:last-child {
                margin-top: -118px;
            }

            .focus_text {
                width: 66.66%;
                margin-top: 248px;
                height: 248px;
                padding: 36px;
                background: rgb(156, 166, 104);
                color: #fff;
            }

            .focus_text h2 {
                text-align: center;
                text-transform: uppercase;
            }

            .focus img {            }

            .focus p {
                position: absolute;
                bottom: 0;
                left: 20px;
                color: #fff;
                text-shadow: 0 0 black;
                font-size: 22px;
            }
<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;700&display=swap" rel="stylesheet" />
            <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
        </head>
    
        <body>
            <div class="container py-5">
                <div class="row">
                    <div class="col-md-12">
                        <h2 class="text-center">Some Title</h2>
                    </div>
                </div>
            </div>
    
            <div class="container">
                <div class="focus_area">
                    <div class="focus">
                        <img src="https://i.ibb.co/wdRy4Wv/cities-and-shelter.png" alt="" class="img-fluid" />
                        <p>Cities & Shelters</p>
                    </div>
                    <div class="focus">
                        <img src="https://i.ibb.co/VCbRdbx/education-and-training.png" alt="" class="img-fluid" />
                        <p>Education & Training</p>
                    </div>
                    <div class="focus">
                        <img src="https://i.ibb.co/3NSF6hj/food-and-water.png" alt="" class="img-fluid" />
                        <p>Food & Water</p>
                    </div>
                    <div class="focus_text">
                        <h2>Delivering Humanitarian Relief Throughout The World</h2>
                    </div>
                    <div class="focus">
                        <img src="https://i.ibb.co/0BT5vp5/energy-and-environment.png" alt="" class="img-fluid" />
                        <p>Energy & Environment</p>
                    </div>
                    <div class="focus">
                        <img src="https://i.ibb.co/bWpystL/jobs-and-business.png" alt="" class="img-fluid" />
                        <p>Jobs & Business</p>
                    </div>
                    <div class="focus">
                        <img src="https://i.ibb.co/XX9Y7yH/health-and-fitness.png" alt="" class="img-fluid" />
                        <p>Health & Fitness</p>
                    </div>
                </div>
            </div>
    
            <div class="container py-5">
                <div class="row">
                    <div class="col-md-12">
                        <h2 class="text-center">Some Title</h2>
                    </div>
                </div>
            </div>
        </body>
    </html>

原文

I want to make a grid for a non-profit organization like this - image. Here is my pure - HTML & CSS. But margin padding isn't the same, and responsive mode isn't okay. Also, I think my code isn't right. I've spent already 2 days making a perfect grid like that image.

How I can fix layout, margin padding, responsiveness, etc?
What is the right CSS for this grid?

Thanks.

body {
                color: #000;
                font-family: 'Source Sans Pro', sans-serif;
            }

            h1, h2, h3, h4, h5, h6, p {
                font-family: 'Source Sans Pro', sans-serif;
            }

            .focus_area {
                width: 100%;
                display: inline-block;
            }

            .focus {
                width: 33.33%;
                float: left;
                position: relative;
                padding: 2px;
            }

            .focus:last-child {
                margin-top: -118px;
            }

            .focus_text {
                width: 66.66%;
                margin-top: 248px;
                height: 248px;
                padding: 36px;
                background: rgb(156, 166, 104);
                color: #fff;
            }

            .focus_text h2 {
                text-align: center;
                text-transform: uppercase;
            }

            .focus img {            }

            .focus p {
                position: absolute;
                bottom: 0;
                left: 20px;
                color: #fff;
                text-shadow: 0 0 black;
                font-size: 22px;
            }
<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;700&display=swap" rel="stylesheet" />
            <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
        </head>
    
        <body>
            <div class="container py-5">
                <div class="row">
                    <div class="col-md-12">
                        <h2 class="text-center">Some Title</h2>
                    </div>
                </div>
            </div>
    
            <div class="container">
                <div class="focus_area">
                    <div class="focus">
                        <img src="https://i.ibb.co/wdRy4Wv/cities-and-shelter.png" alt="" class="img-fluid" />
                        <p>Cities & Shelters</p>
                    </div>
                    <div class="focus">
                        <img src="https://i.ibb.co/VCbRdbx/education-and-training.png" alt="" class="img-fluid" />
                        <p>Education & Training</p>
                    </div>
                    <div class="focus">
                        <img src="https://i.ibb.co/3NSF6hj/food-and-water.png" alt="" class="img-fluid" />
                        <p>Food & Water</p>
                    </div>
                    <div class="focus_text">
                        <h2>Delivering Humanitarian Relief Throughout The World</h2>
                    </div>
                    <div class="focus">
                        <img src="https://i.ibb.co/0BT5vp5/energy-and-environment.png" alt="" class="img-fluid" />
                        <p>Energy & Environment</p>
                    </div>
                    <div class="focus">
                        <img src="https://i.ibb.co/bWpystL/jobs-and-business.png" alt="" class="img-fluid" />
                        <p>Jobs & Business</p>
                    </div>
                    <div class="focus">
                        <img src="https://i.ibb.co/XX9Y7yH/health-and-fitness.png" alt="" class="img-fluid" />
                        <p>Health & Fitness</p>
                    </div>
                </div>
            </div>
    
            <div class="container py-5">
                <div class="row">
                    <div class="col-md-12">
                        <h2 class="text-center">Some Title</h2>
                    </div>
                </div>
            </div>
        </body>
    </html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（5）

潜移默化 2025-02-18 06:22:07

您可以使用CSS网格轻松获得想要的东西：

        <div class="container">
            <div class="c1">1</div>
            <div class="c2">2</div>
            <div class="c3">3</div>
            <div class="c4">4</div>
            <div class="c5">5</div>
            <div class="c6">6</div>
            <div class="c7">7</div>
        </div>

.container {
    height: 100%;
    display: grid;
    gap: 2px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(6, 1fr);
}

.c1, .c2,.c6,.c7 {
    grid-row: span 2;
}

.c3,.c5 {
     grid-row: span 3;
}

.c4 {
     grid-row: span 2;
     grid-column: span 2;
}

you can easily get what you want by using CSS Grid :

        <div class="container">
            <div class="c1">1</div>
            <div class="c2">2</div>
            <div class="c3">3</div>
            <div class="c4">4</div>
            <div class="c5">5</div>
            <div class="c6">6</div>
            <div class="c7">7</div>
        </div>

.container {
    height: 100%;
    display: grid;
    gap: 2px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(6, 1fr);
}

.c1, .c2,.c6,.c7 {
    grid-row: span 2;
}

.c3,.c5 {
     grid-row: span 3;
}

.c4 {
     grid-row: span 2;
     grid-column: span 2;
}
回复 原文
陌路黄昏 2025-02-18 06:22:07

这是一个开始，您必须自己添加数据和图像，但是可以轻松地更改它以满足您的确切需求。

/* These are just to make the demo look nice */
body {
  display: grid;
  height: 100vh;
  margin: 0;
  place-items: center;
}
main {
  height: 80vmin;
  width: 80vmin;
}

/* Actual code here */
main {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr;
}

div {
  background-color: lightgrey;
}


/* top right */

div:nth-child(3) {
  background-color: #f77;
  grid-row: span 2;
}


/* middle */

div:nth-child(4) {
  background-color: #7e7;
  grid-column: span 2;
  grid-row: span 2;
}


/* bottom right */

div:nth-child(5) {
  background-color: #f77;
  grid-row: span 2;
}

@media screen and (max-width: 800px) {
  main {
    grid-template-columns: 1fr 1fr;
    height: 95%;
    width: 95%;
  }
  div:nth-child(3),
  div:nth-child(5) {
    grid-column: span 2;
    grid-row: span 2;
  }
}
<main>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</main>

Here is a start, you would have to add data and images yourself, but it can be easily changed to fit your exact needs.

/* These are just to make the demo look nice */
body {
  display: grid;
  height: 100vh;
  margin: 0;
  place-items: center;
}
main {
  height: 80vmin;
  width: 80vmin;
}

/* Actual code here */
main {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr;
}

div {
  background-color: lightgrey;
}


/* top right */

div:nth-child(3) {
  background-color: #f77;
  grid-row: span 2;
}


/* middle */

div:nth-child(4) {
  background-color: #7e7;
  grid-column: span 2;
  grid-row: span 2;
}


/* bottom right */

div:nth-child(5) {
  background-color: #f77;
  grid-row: span 2;
}

@media screen and (max-width: 800px) {
  main {
    grid-template-columns: 1fr 1fr;
    height: 95%;
    width: 95%;
  }
  div:nth-child(3),
  div:nth-child(5) {
    grid-column: span 2;
    grid-row: span 2;
  }
}
<main>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</main>

回复 原文
吻风 2025-02-18 06:22:07
body {
  color: #000;
  font-family: 'Source Sans Pro', sans-serif;
  line-height: 1.1;
}

.card_text {
  height: 270px;
  background: rgb(156, 166, 104);
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  padding: 100px;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-family: 'Source Sans Pro', sans-serif;
}

.bolBlock p {
  left: 20px;
  color: #fff;
  text-shadow: 0 0 black;
  font-size: 22px;
  margin-top: -40px;
}

.container {
  display: flex;
}

.row {
  --bs-gutter-x: 0;
  display: flex;
}

.bolBlock {
  padding: 1px !important;
}
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;700&display=swap" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<h2 class="text-center">Some Title</h2>
<div class="container">
  <div class="row col-8">
    <div class="bolBlock col-6">
      <img src="https://i.ibb.co/wdRy4Wv/cities-and-shelter.png" alt="" class="img-fluid" />
      <p>Cities & Shelters</p>
    </div>
    <div class="bolBlock col-6">
      <img src="https://i.ibb.co/VCbRdbx/education-and-training.png" alt="" class="img-fluid" />
      <p>Education & Training</p>
    </div>
    <div class="card_text col-12">
      <h2>Delivering Humanitarian Relief Throughout The World</h2>
    </div>
    <div class="bolBlock col-6">
      <img src="https://i.ibb.co/0BT5vp5/energy-and-environment.png" alt="" class="img-fluid" />
      <p>Energy & Environment</p>
    </div>
    <div class="bolBlock col-6">
      <img src="https://i.ibb.co/bWpystL/jobs-and-business.png" alt="" class="img-fluid" />
      <p>Jobs & Business</p>
    </div>

  </div>
  <div class="col-4">
    <div class="bolBlock">
      <img src="https://i.ibb.co/3NSF6hj/food-and-water.png" alt="" class="img-fluid" />
      <p>Food & Water</p>
    </div>
    <div class="bolBlock">
      <img src="https://i.ibb.co/XX9Y7yH/health-and-fitness.png" alt="" class="img-fluid" />
      <p>Health & Fitness</p>
    </div>

  </div>

</div>

</body>

</html>

body {
  color: #000;
  font-family: 'Source Sans Pro', sans-serif;
  line-height: 1.1;
}

.card_text {
  height: 270px;
  background: rgb(156, 166, 104);
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  padding: 100px;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-family: 'Source Sans Pro', sans-serif;
}

.bolBlock p {
  left: 20px;
  color: #fff;
  text-shadow: 0 0 black;
  font-size: 22px;
  margin-top: -40px;
}

.container {
  display: flex;
}

.row {
  --bs-gutter-x: 0;
  display: flex;
}

.bolBlock {
  padding: 1px !important;
}
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;700&display=swap" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<h2 class="text-center">Some Title</h2>
<div class="container">
  <div class="row col-8">
    <div class="bolBlock col-6">
      <img src="https://i.ibb.co/wdRy4Wv/cities-and-shelter.png" alt="" class="img-fluid" />
      <p>Cities & Shelters</p>
    </div>
    <div class="bolBlock col-6">
      <img src="https://i.ibb.co/VCbRdbx/education-and-training.png" alt="" class="img-fluid" />
      <p>Education & Training</p>
    </div>
    <div class="card_text col-12">
      <h2>Delivering Humanitarian Relief Throughout The World</h2>
    </div>
    <div class="bolBlock col-6">
      <img src="https://i.ibb.co/0BT5vp5/energy-and-environment.png" alt="" class="img-fluid" />
      <p>Energy & Environment</p>
    </div>
    <div class="bolBlock col-6">
      <img src="https://i.ibb.co/bWpystL/jobs-and-business.png" alt="" class="img-fluid" />
      <p>Jobs & Business</p>
    </div>

  </div>
  <div class="col-4">
    <div class="bolBlock">
      <img src="https://i.ibb.co/3NSF6hj/food-and-water.png" alt="" class="img-fluid" />
      <p>Food & Water</p>
    </div>
    <div class="bolBlock">
      <img src="https://i.ibb.co/XX9Y7yH/health-and-fitness.png" alt="" class="img-fluid" />
      <p>Health & Fitness</p>
    </div>

  </div>

</div>

</body>

</html>

回复 原文
疑心病 2025-02-18 06:22:07

您可以检查解决方案。使用的flexbox以及有关响应性，只有文本大小会影响，因此请相应地调整文本大小。还要注意，为了样式目的，我在标记中添加了一些更改。让我知道它是否回答了您的问题。

/* style.css */
body {
    color: #000;
    font-family: 'Source Sans Pro', sans-serif;
}

h1, h2, h3, h4, h5, h6, p {
    font-family: 'Source Sans Pro', sans-serif;
}

.focus_area {
    width: 100%;
    display: flex;
    justify-content: center;
}

.focus_area .left {
    display: flex;
    flex-direction: column;
    max-width: 66.66666%;
    justify-content: space-between;
}

.focus_area .right {
    display: flex;
    flex-wrap: wrap;
    max-width: 33.33333%;
}

.left-top, .left-bottom {
    display: flex;
}

.left .focus {
    flex: 50%;
}

.focus_text {
    background: rgb(156, 166, 104);
    color: #fff;
    flex: 2;
    display: flex;
    margin: 2px;
}

.focus_text h2 {
    text-align: center;
    text-transform: uppercase;
    align-items: center;
    margin: auto;
    font-size: 16px;
}

.focus {
    position: relative;
    padding: 2px;
}

.right .focus img {
    max-width: 100%;
    height: auto;
}

.left .focus img {  
    max-width: 100%;
    height: auto;
}

.focus p {
    color: #fff;
    text-shadow: 0 0 black;
    font-size: 22px;
    position: absolute;
    bottom: 0px;
    padding-left: 15px;
    font-size: 14px;
}

/* tablet styles */
@media screen and (max-width: 768px) and (min-width: 481px) {
    .focus_area {
        flex-direction: column;
    }

    .focus_area .left, .focus_area .right {
        max-width: 100%;
    }

    .focus_text {
        padding: 50px 0px;
    }

    .focus_area .right {
        flex-wrap: nowrap;
    }
} /* end of tablet styles */

/* styles for mobile devices */
@media screen and (max-width: 480px) {
    .focus_area {
        flex-direction: column;
    }

    .focus_area .left, .focus_area .right {
        max-width: 100%;
    }

    .left-top, .left-bottom {
        display: block;
    }

    .focus_text {
        padding: 50px 0px;
    }
} /* end of mobile styles */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;700&display=swap" rel="stylesheet" />
</head>
<body>
    <div class="container py-5">
        <div class="row">
            <div class="col-md-12">
                <h2 class="text-center">Some Title</h2>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="focus_area">
            <div class="left">
                <div class="left-top">
                    <div class="focus">
                        <img src="https://i.ibb.co/wdRy4Wv/cities-and-shelter.png" alt="" class="img-fluid" />
                        <p>Cities & Shelters</p>
                    </div>
                    <div class="focus">
                        <img src="https://i.ibb.co/VCbRdbx/education-and-training.png" alt="" class="img-fluid" />
                        <p>Education & Training</p>
                    </div>
                </div>
                
                <div class="focus_text">
                    <h2>Delivering Humanitarian Relief Throughout The World</h2>
                </div>

                <div class="left-bottom">
                    <div class="focus">
                        <img src="https://i.ibb.co/0BT5vp5/energy-and-environment.png" alt="" class="img-fluid" />
                        <p>Energy & Environment</p>
                    </div>
                    <div class="focus">
                        <img src="https://i.ibb.co/bWpystL/jobs-and-business.png" alt="" class="img-fluid" />
                        <p>Jobs & Business</p>
                    </div>
                </div>
            </div>

            <div class="right">
                <div class="focus">
                    <img src="https://i.ibb.co/XX9Y7yH/health-and-fitness.png" alt="" class="img-fluid" />
                    <p>Health & Fitness</p>
                </div>
                <div class="focus">
                    <img src="https://i.ibb.co/3NSF6hj/food-and-water.png" alt="" class="img-fluid" />
                    <p>Food & Water</p>
                </div>
            </div>
        </div>
    </div>

    <div class="container py-5">
        <div class="row">
            <div class="col-md-12">
                <h2 class="text-center">Some Title</h2>
            </div>
        </div>
    </div>




    
</body>
</html>

You can check out the solution. Used flexbox and as for the responsiveness, only the text size will affect, so adjust the text size accordingly. Also to note that I added some changes in the markup for the style purposes. Let me know if it answered your question.

/* style.css */
body {
    color: #000;
    font-family: 'Source Sans Pro', sans-serif;
}

h1, h2, h3, h4, h5, h6, p {
    font-family: 'Source Sans Pro', sans-serif;
}

.focus_area {
    width: 100%;
    display: flex;
    justify-content: center;
}

.focus_area .left {
    display: flex;
    flex-direction: column;
    max-width: 66.66666%;
    justify-content: space-between;
}

.focus_area .right {
    display: flex;
    flex-wrap: wrap;
    max-width: 33.33333%;
}

.left-top, .left-bottom {
    display: flex;
}

.left .focus {
    flex: 50%;
}

.focus_text {
    background: rgb(156, 166, 104);
    color: #fff;
    flex: 2;
    display: flex;
    margin: 2px;
}

.focus_text h2 {
    text-align: center;
    text-transform: uppercase;
    align-items: center;
    margin: auto;
    font-size: 16px;
}

.focus {
    position: relative;
    padding: 2px;
}

.right .focus img {
    max-width: 100%;
    height: auto;
}

.left .focus img {  
    max-width: 100%;
    height: auto;
}

.focus p {
    color: #fff;
    text-shadow: 0 0 black;
    font-size: 22px;
    position: absolute;
    bottom: 0px;
    padding-left: 15px;
    font-size: 14px;
}

/* tablet styles */
@media screen and (max-width: 768px) and (min-width: 481px) {
    .focus_area {
        flex-direction: column;
    }

    .focus_area .left, .focus_area .right {
        max-width: 100%;
    }

    .focus_text {
        padding: 50px 0px;
    }

    .focus_area .right {
        flex-wrap: nowrap;
    }
} /* end of tablet styles */

/* styles for mobile devices */
@media screen and (max-width: 480px) {
    .focus_area {
        flex-direction: column;
    }

    .focus_area .left, .focus_area .right {
        max-width: 100%;
    }

    .left-top, .left-bottom {
        display: block;
    }

    .focus_text {
        padding: 50px 0px;
    }
} /* end of mobile styles */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;700&display=swap" rel="stylesheet" />
</head>
<body>
    <div class="container py-5">
        <div class="row">
            <div class="col-md-12">
                <h2 class="text-center">Some Title</h2>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="focus_area">
            <div class="left">
                <div class="left-top">
                    <div class="focus">
                        <img src="https://i.ibb.co/wdRy4Wv/cities-and-shelter.png" alt="" class="img-fluid" />
                        <p>Cities & Shelters</p>
                    </div>
                    <div class="focus">
                        <img src="https://i.ibb.co/VCbRdbx/education-and-training.png" alt="" class="img-fluid" />
                        <p>Education & Training</p>
                    </div>
                </div>
                
                <div class="focus_text">
                    <h2>Delivering Humanitarian Relief Throughout The World</h2>
                </div>

                <div class="left-bottom">
                    <div class="focus">
                        <img src="https://i.ibb.co/0BT5vp5/energy-and-environment.png" alt="" class="img-fluid" />
                        <p>Energy & Environment</p>
                    </div>
                    <div class="focus">
                        <img src="https://i.ibb.co/bWpystL/jobs-and-business.png" alt="" class="img-fluid" />
                        <p>Jobs & Business</p>
                    </div>
                </div>
            </div>

            <div class="right">
                <div class="focus">
                    <img src="https://i.ibb.co/XX9Y7yH/health-and-fitness.png" alt="" class="img-fluid" />
                    <p>Health & Fitness</p>
                </div>
                <div class="focus">
                    <img src="https://i.ibb.co/3NSF6hj/food-and-water.png" alt="" class="img-fluid" />
                    <p>Food & Water</p>
                </div>
            </div>
        </div>
    </div>

    <div class="container py-5">
        <div class="row">
            <div class="col-md-12">
                <h2 class="text-center">Some Title</h2>
            </div>
        </div>
    </div>




    
</body>
</html>

回复 原文
椵侞 2025-02-18 06:22:07

我使用网格和flex css属性做出了解决方案；这样，我设法实现了您要创建的布局。

[编辑：我不知道发布链接不符合准则，对不起:(]

无论如何，我在此处发布了有关如何创建布局的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;700&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />

    <style>
      body {
        color: #000;
        font-family: 'Source Sans Pro', sans-serif;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p {
        font-family: 'Source Sans Pro', sans-serif;
      }

      .focus_area {
        width: 100%;
        /* display: inline-block; */
      }

      .focus {
        /* width: 33.33%; */
        float: left;
        position: relative;
        padding: 2px;
      }

      .focus:last-child {
        /* margin-top: -118px; */
      }

      .focus_text {
        width: 100%;
        /* margin-top: 248px; */
        /* height: 248px; */
        padding: 30px;
        background: rgb(156, 166, 104);
        color: #fff;
      }

      .focus_text h2 {
        text-align: center;
        text-transform: uppercase;
      }

      .focus img {
      }

      .focus p {
        position: relative;
        bottom: 65px;
        left: 10px;
        color: #fff;
        text-shadow: 0 0 black;
        font-size: 22px;
      }

      .grid {
        display: grid;
        flex: 0 1 65%;
        grid-template-rows: repeat(3, minmax(33.3%, 33.3%));
      }

      /* Grid block that goes from column 1 to column 3
         and from row 2 to row 3 */
      .grid-block-1-3 {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 3;
      }

      .grid-block-1-2 {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 3;
        grid-row-end: 4;
      }

      .grid-block-2-3 {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 3;
        grid-row-end: 4;
      }

      .grid-block-3-4 {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 3;
        grid-row-end: 4;
      }

      .grid-block-1-3-row {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 3;
      }

      .img-height {
        height: 100%;
        background-size: contain;
      }

      .flex-layout {
        display: flex;
      }

      .second-grid {
        display: grid;
        flex: 0 1 35%;
      }

    @media only screen and (max-width: 480px) {
      .grid {
        display: flex;
        flex-flow: column;
    
      }

      .flex-layout {
        display: flex;
        flex-flow: column;
      }

      .focus {
        flex: 0 1 215px;
      }
    }

    </style>
  </head>

  <body>
    <div class="container py-5">
      <div class="row">
        <div class="col-md-12">
          <h2 class="text-center">Some Title</h2>
        </div>
      </div>
    </div>

    <div class="container flex-layout">
      <div class="focus_area grid">
        <div class="focus">
          <img
            src="https://i.ibb.co/wdRy4Wv/cities-and-shelter.png"
            alt=""
            class="img-fluid img-height"
          />
          <p>Cities & Shelters</p>
        </div>
        <div class="focus">
          <img
            src="https://i.ibb.co/VCbRdbx/education-and-training.png"
            alt=""
            class="img-fluid img-height"
          />
          <p>Education & Training</p>
        </div>

        <div class="focus_text grid-block-1-3">
          <h2>Delivering Humanitarian Relief Throughout The World</h2>
        </div>
        <div class="focus grid-block-1-2">
          <img
            src="https://i.ibb.co/0BT5vp5/energy-and-environment.png"
            alt=""
            class="img-fluid img-height"
          />
          <p>Energy & Environment</p>
        </div>
        <div class="focus grid-block-2-3">
          <img
            src="https://i.ibb.co/bWpystL/jobs-and-business.png"
            alt=""
            class="img-fluid img-height"
          />
          <p>Jobs & Business</p>
        </div>
      </div>
      <div class="second-grid">
        <div class="focus grid-block-1-3-row">
          <img
            src="https://i.ibb.co/3NSF6hj/food-and-water.png"
            alt=""
            class="img-fluid img-height"
          />
          <p>Food & Water</p>
        </div>
        <div class="focus grid-block-3-4">
          <img
            src="https://i.ibb.co/XX9Y7yH/health-and-fitness.png"
            alt=""
            class="img-fluid img-height"
          />
          <p>Health & Fitness</p>
        </div>
      </div>
    </div>

    <div class="container py-5">
      <div class="row">
        <div class="col-md-12">
          <h2 class="text-center">Some Title</h2>
        </div>
      </div>
    </div>
  </body>
</html>

I made a solution using grid and flex css properties; that way I managed to realize the layout you wanted to create.

[Edited: I didn't know posting links don't fit the guidelines, sorry :(]

Anyway, I post here a snippet code on how I managed to create the layout:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;700&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />

    <style>
      body {
        color: #000;
        font-family: 'Source Sans Pro', sans-serif;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p {
        font-family: 'Source Sans Pro', sans-serif;
      }

      .focus_area {
        width: 100%;
        /* display: inline-block; */
      }

      .focus {
        /* width: 33.33%; */
        float: left;
        position: relative;
        padding: 2px;
      }

      .focus:last-child {
        /* margin-top: -118px; */
      }

      .focus_text {
        width: 100%;
        /* margin-top: 248px; */
        /* height: 248px; */
        padding: 30px;
        background: rgb(156, 166, 104);
        color: #fff;
      }

      .focus_text h2 {
        text-align: center;
        text-transform: uppercase;
      }

      .focus img {
      }

      .focus p {
        position: relative;
        bottom: 65px;
        left: 10px;
        color: #fff;
        text-shadow: 0 0 black;
        font-size: 22px;
      }

      .grid {
        display: grid;
        flex: 0 1 65%;
        grid-template-rows: repeat(3, minmax(33.3%, 33.3%));
      }

      /* Grid block that goes from column 1 to column 3
         and from row 2 to row 3 */
      .grid-block-1-3 {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 3;
      }

      .grid-block-1-2 {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 3;
        grid-row-end: 4;
      }

      .grid-block-2-3 {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 3;
        grid-row-end: 4;
      }

      .grid-block-3-4 {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 3;
        grid-row-end: 4;
      }

      .grid-block-1-3-row {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 3;
      }

      .img-height {
        height: 100%;
        background-size: contain;
      }

      .flex-layout {
        display: flex;
      }

      .second-grid {
        display: grid;
        flex: 0 1 35%;
      }

    @media only screen and (max-width: 480px) {
      .grid {
        display: flex;
        flex-flow: column;
    
      }

      .flex-layout {
        display: flex;
        flex-flow: column;
      }

      .focus {
        flex: 0 1 215px;
      }
    }

    </style>
  </head>

  <body>
    <div class="container py-5">
      <div class="row">
        <div class="col-md-12">
          <h2 class="text-center">Some Title</h2>
        </div>
      </div>
    </div>

    <div class="container flex-layout">
      <div class="focus_area grid">
        <div class="focus">
          <img
            src="https://i.ibb.co/wdRy4Wv/cities-and-shelter.png"
            alt=""
            class="img-fluid img-height"
          />
          <p>Cities & Shelters</p>
        </div>
        <div class="focus">
          <img
            src="https://i.ibb.co/VCbRdbx/education-and-training.png"
            alt=""
            class="img-fluid img-height"
          />
          <p>Education & Training</p>
        </div>

        <div class="focus_text grid-block-1-3">
          <h2>Delivering Humanitarian Relief Throughout The World</h2>
        </div>
        <div class="focus grid-block-1-2">
          <img
            src="https://i.ibb.co/0BT5vp5/energy-and-environment.png"
            alt=""
            class="img-fluid img-height"
          />
          <p>Energy & Environment</p>
        </div>
        <div class="focus grid-block-2-3">
          <img
            src="https://i.ibb.co/bWpystL/jobs-and-business.png"
            alt=""
            class="img-fluid img-height"
          />
          <p>Jobs & Business</p>
        </div>
      </div>
      <div class="second-grid">
        <div class="focus grid-block-1-3-row">
          <img
            src="https://i.ibb.co/3NSF6hj/food-and-water.png"
            alt=""
            class="img-fluid img-height"
          />
          <p>Food & Water</p>
        </div>
        <div class="focus grid-block-3-4">
          <img
            src="https://i.ibb.co/XX9Y7yH/health-and-fitness.png"
            alt=""
            class="img-fluid img-height"
          />
          <p>Health & Fitness</p>
        </div>
      </div>
    </div>

    <div class="container py-5">
      <div class="row">
        <div class="col-md-12">
          <h2 class="text-center">Some Title</h2>
        </div>
      </div>
    </div>
  </body>
</html>

回复 原文
~没有更多了~

关于作者

夜空下最亮的亮点

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

櫻之舞

文章 0 评论 0

弥枳

文章 0 评论 0

m2429

文章 0 评论 0

寻找一个思念的角度

文章 0 评论 0

野却迷人

文章 0 评论 0

我怀念的。

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文