CSS创建一个2列宽度为80%的网格

hfwmuf9z 于 2023-03-25 发布在其他

关注(0)|答案(4)|浏览(112)

我正在尝试创建一个有2列的网格，每列包含左侧的图片和右侧的文本。
我的图像保持采取大部分的空间，并成为其上的唯一项目，即使我设置了一个新的宽度，它不考虑它在计数，我怎么能得到一个2列网格，其中每列是由一个块的图像在左边和文字的权利？
下面是一个例子：

.menuFormation {
    display: grid;
    grid-template-columns: 40vw 40Vw;
    grid-template-rows: 30vh 30vh;
    grid-gap: 20px;
    width: 90vw;
    justify-items: center;
}

.formationContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 20vw;
    object-fit: contain;
}

.formationImage{
    width: 10px;
}

.blocTexteFormation {
    font-size: large;
}

<main>
        <section>
            <h1>Formations</h1>
        </section>
        <section class="menuFormation">
            <div class="formationContainer"> 
                <img class= "formationImage" src="https://www.toureiffel.paris/sites/default/files/actualite/image_principale/vue_depuisjardins_webbanner_3.jpg">
                <div class="blocTexteFormation">Ceci est le texte que nous importerons depuis PHP</div>
            </div>
            <div class="formationContainer">
                <img class= "formationImage" src="https://www.toureiffel.paris/sites/default/files/actualite/image_principale/vue_depuisjardins_webbanner_3.jpg">
                <div class="blocTexteFormation">Ceci est le texte que nous importerons depuis PHP</div>
            </div>
            <div class="formationContainer">
                <img class= "formationImage" src="https://www.toureiffel.paris/sites/default/files/actualite/image_principale/vue_depuisjardins_webbanner_3.jpg">
                <div class="blocTexteFormation">Ceci est le texte que nous importerons depuis PHP</div>
            </div>
            <div class="formationContainer">
                <img class= "formationImage" src="https://www.toureiffel.paris/sites/default/files/actualite/image_principale/vue_depuisjardins_webbanner_3.jpg">
                <div class="blocTexteFormation">Ceci est le texte que nous importerons depuis PHP</div>
            </div>
        </section>
    </main>

我把当地的照片换成了网上找到的埃菲尔铁塔的照片，但想法是一样的
谢谢你花时间阅读我的书

css

来源：https://stackoverflow.com/questions/75799305/css-create-a-grid-with-2-columns-of-80width

4条答案

按热度按时间

h22fl7wq1#

更新示例：

.menuFormation {
    display: grid;
    grid-template-columns: auto auto;
    gap: 20px;
    width: 80%;
    margin: 0 auto;
}
.formationContainer {
    display: grid;
    grid-auto-flow: column;
    gap: 10px;
}
.formationImage {
    width: 100%;
}

<main>
  <section>
      <h1>Formations</h1>
  </section>
  <section class="menuFormation">
      <div class="formationContainer"> 
          <img class= "formationImage" src="https://www.toureiffel.paris/sites/default/files/actualite/image_principale/vue_depuisjardins_webbanner_3.jpg">
          <div class="blocTexteFormation">Ceci est le texte que nous importerons depuis PHP</div>
      </div>
      <div class="formationContainer">
          <img class= "formationImage" src="https://www.toureiffel.paris/sites/default/files/actualite/image_principale/vue_depuisjardins_webbanner_3.jpg">
          <div class="blocTexteFormation">Ceci est le texte que nous importerons depuis PHP</div>
      </div>
      <div class="formationContainer">
          <img class= "formationImage" src="https://www.toureiffel.paris/sites/default/files/actualite/image_principale/vue_depuisjardins_webbanner_3.jpg">
          <div class="blocTexteFormation">Ceci est le texte que nous importerons depuis PHP</div>
      </div>
      <div class="formationContainer">
          <img class= "formationImage" src="https://www.toureiffel.paris/sites/default/files/actualite/image_principale/vue_depuisjardins_webbanner_3.jpg">
          <div class="blocTexteFormation">Ceci est le texte que nous importerons depuis PHP</div>
      </div>
  </section>
</main>

赞(0）回复(0）举报 2023-03-25

jq6vz3qz2#

您可以使用CSS网格创建双列网格布局。您可以定义网格的列和行，然后将页面上的每个元素分配给特定的单元格。例如，您可以将图像分配给左列，将文本分配给右列。您还可以设置图像的宽度，以确保它占用所需的空间。
下面是一个CSS代码的例子：

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

.img {
  width: 200px;
}

然后在HTML中：

<div class="grid">
  <img class="img" src="image.jpg" />
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

赞(0）回复(0）举报 2023-03-25

kninwzqo3#

更新代码，试试这个

.menuFormation {
    display: grid;
    grid-template-columns: 40vw 40Vw;
    grid-template-rows: 30vh 30vh;
    grid-gap: 20px;
    width: 90vw;
    justify-items: center;
}

.formationContainer {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   width: 20vw;
   object-fit: contain;
   justify-content: space-between;
}
.formationImage{
    width: 20%;
}

.blocTexteFormation {
    font-size: large;
}

<main>
        <section>
            <h1>Formations</h1>
        </section>
        <section class="menuFormation">
            <div class="formationContainer"> 
                <img class= "formationImage" src="https://www.toureiffel.paris/sites/default/files/actualite/image_principale/vue_depuisjardins_webbanner_3.jpg">
                <div class="blocTexteFormation">Ceci est le texte que nous importerons depuis PHP</div>
            </div>
            <div class="formationContainer">
                <img class= "formationImage" src="https://www.toureiffel.paris/sites/default/files/actualite/image_principale/vue_depuisjardins_webbanner_3.jpg">
                <div class="blocTexteFormation">Ceci est le texte que nous importerons depuis PHP</div>
            </div>
            <div class="formationContainer">
                <img class= "formationImage" src="https://www.toureiffel.paris/sites/default/files/actualite/image_principale/vue_depuisjardins_webbanner_3.jpg">
                <div class="blocTexteFormation">Ceci est le texte que nous importerons depuis PHP</div>
            </div>
            <div class="formationContainer">
                <img class= "formationImage" src="https://www.toureiffel.paris/sites/default/files/actualite/image_principale/vue_depuisjardins_webbanner_3.jpg">
                <div class="blocTexteFormation">Ceci est le texte que nous importerons depuis PHP</div>
            </div>
        </section>
    </main>

赞(0）回复(0）举报 2023-03-25

58wvjzkj4#

在当前代码中，图像占用了大部分空间，因为其宽度在.formationImage类中设置为10像素。要使图像和文本块在各自的列中占用相等的宽度，可以将grid-template-columns属性设置为每列的百分比值。

.menuFormation {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto;
  grid-gap: 20px;
  width: 90vw;
  justify-items: center;
}

.formationContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.formationImage {
  max-width: 100%;
  height: auto;
}

.blocTexteFormation {
  font-size: large;
}

赞(0）回复(0）举报 2023-03-25

我来回答

CSS创建一个2列宽度为80%的网格

4条答案

相关问题

热门标签

最新问答