使用flexbox时出现问题。如何在行中添加新的div?

huangapple go评论69阅读模式
英文:

Problem with flexbox. How to add new div in row?

问题

以下是你要翻译的内容:

"I want to make a section with an img, title and desctription, with 3 img's in one row.

Img
Title
Desc

I used flexbox I did the first step and created 3 imgs in one row with google fonts. Now I want to add a title below them and I have a problem becasue the text is being placed next to the img instead of below it.

I've tried doing it in several ways.

Adding a separate 'title' dive outside the 'font' dive. It seemed to work on the website, but in the mobile version the subtitles were placed outside the pictures. When I try in one section with pictures, the inscription is displayed next to them, not under them. I've been fighting with this for over 2 hours. I'm losing hope, maybe you can guide me with what I'm doing wrong?"

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" rel="stylesheet" />
<style type="text/css">
#home-article conteiner{
  height: 1000px;
}

.main_txt{
 margin-top: 0px;
 text-align: center;
 text-shadow: 3px 3px 3px #a9a9a9;
 font-size: 40px;
}
.main_txt  h3
{
 margin-top: -8px;
 margin-bottom: -2px;
 font-weight: 400;
}

.font{
  margin-top: 10px;
  display: flex;
  flex-flow: row nowrap;
}

.square{
  /*display: inline-block;*/
  border-radius: 25px;
  flex: 1;
  display: flex;
  width: 360px;
  height: 222px;
  background-color:#ab2e12;
  margin: 10px;
  font-size:0;
  text-align: center;
}

.material-symbols-outlined {
  align-items:center;
  justify-content: center;
  color: white;
  font-size: 200px;
    flex: 1;
  display: flex;
}

.title{
flex: 1;
  display: flex;
}

@media (max-width: 800px) {
  .font, .title {
    flex-direction: column;
  }
}
</style>
<div class="main_txt">
<h3>Centrum Zarządzania <strong>Nieruchomościami</strong></h3>
</div>

<div class="font">

<div class="square"><span class="material-symbols-outlined">attach_money</span></div>
<div class="title">Brak prowizji</div>

<div class="square"><span class="material-symbols-outlined">campaign</span></div>
<div class="title">Brak prowizji</div>

<div class="square"><span class="material-symbols-outlined">handshake</span></div>
<div class="title">Brak prowizji</div>

</div>
英文:

I want to make a section with an img, title and desctription, with 3 img's in one row.

Img
Title
Desc

I used flexbox I did the first step and created 3 imgs in one row with google fonts. Now I want to add a title below them and I have a problem becasue the text is being placed next to the img instead of below it.

I've tried doing it in several ways.

Adding a separate 'title' dive outside the 'font' dive. It seemed to work on the website, but in the mobile version the subtitles were placed outside the pictures. When I try in one section with pictures, the inscription is displayed next to them, not under them. I've been fighting with this for over 2 hours. I'm losing hope, maybe you can guide me with what I'm doing wrong?

&lt;link href=&quot;https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&quot; rel=&quot;stylesheet&quot; /&gt;
&lt;link href=&quot;https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0&quot; rel=&quot;stylesheet&quot; /&gt;
&lt;link href=&quot;https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0&quot; rel=&quot;stylesheet&quot; /&gt;
&lt;style type=&quot;text/css&quot;&gt;
#home-article conteiner{
height: 1000px;
}
.main_txt{
margin-top: 0px;
text-align: center;
text-shadow: 3px 3px 3px #a9a9a9;
font-size: 40px;
}
.main_txt  h3
{
margin-top: -8px;
margin-bottom: -2px;
font-weight: 400;
}
.font{
margin-top: 10px;
display: flex;
flex-flow: row nowrap;
}
.square{
/*display: inline-block;*/
border-radius: 25px;
flex: 1;
display: flex;
width: 360px;
height: 222px;
background-color:#ab2e12;
margin: 10px;
font-size:0;
text-align: center;
}
.material-symbols-outlined {
align-items:center;
justify-content: center;
color: white;
font-size: 200px;
flex: 1;
display: flex;
}
.title{
flex: 1;
display: flex;
}
@media (max-width: 800px) {
.font, .title {
flex-direction: column;
}
}
&lt;/style&gt;
&lt;div class=&quot;main_txt&quot;&gt;
&lt;h3&gt;Centrum Zarządzania &lt;strong&gt;Nieruchomościami&lt;/strong&gt;&lt;/h3&gt;
&lt;/div&gt;
&lt;div class=&quot;font&quot;&gt;
&lt;div class=&quot;square&quot;&gt;&lt;span class=&quot;material-symbols-outlined&quot;&gt;attach_money&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;title&quot;&gt;Brak prowizji&lt;/div&gt;
&lt;div class=&quot;square&quot;&gt;&lt;span class=&quot;material-symbols-outlined&quot;&gt;campaign&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;title&quot;&gt;Brak prowizji&lt;/div&gt;
&lt;div class=&quot;square&quot;&gt;&lt;span class=&quot;material-symbols-outlined&quot;&gt;handshake&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;title&quot;&gt;Brak prowizji&lt;/div&gt;
&lt;/div&gt;

答案1

得分: 1

你可以将每个图像和标题放在单独的容器中,对此容器 div 应用 flexbox 并将 flex-direction 设置为 column。你的代码应该如下所示:

<div class="font">
  <div class="container">
    <div class="square">
      <span class="material-symbols-outlined">attach_money</span>
    </div>
    <div class="title">Brak prowizji</div>
  </div>
  
  <div class="container">
    <div class="square">
      <span class="material-symbols-outlined">campaign</span>
    </div>
    <div class="title">Brak prowizji</div>
  </div>
  
  <div class="container">
    <div class="square">
      <span class="material-symbols-outlined">handshake</span>
    </div>
    <div class="title">Brak prowizji</div>
  </div>
</div>

<style>
  .font {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px;
  }
  
  .square {
    border-radius: 25px;
    width: 360px;
    height: 222px;
    background-color: #ab2e12;
    margin-bottom: 10px;
    font-size: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .material-symbols-outlined {
    color: white;
    font-size: 200px;
  }
  
  .title {
    font-size: 60px;
    color: white;
    text-align: center;
  }
</style>
英文:

You can wrap each image and title in a separate container, apply flexbox to this container div and set the flex-direction to column. Your code should look like this:

&lt;div class=&quot;font&quot;&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;square&quot;&gt;
&lt;span class=&quot;material-symbols-outlined&quot;&gt;attach_money&lt;/span&gt;
&lt;/div&gt;
&lt;div class=&quot;title&quot;&gt;Brak prowizji&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;square&quot;&gt;
&lt;span class=&quot;material-symbols-outlined&quot;&gt;campaign&lt;/span&gt;
&lt;/div&gt;
&lt;div class=&quot;title&quot;&gt;Brak prowizji&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;square&quot;&gt;
&lt;span class=&quot;material-symbols-outlined&quot;&gt;handshake&lt;/span&gt;
&lt;/div&gt;
&lt;div class=&quot;title&quot;&gt;Brak prowizji&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;style&gt;
.font {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px;
}
.square {
border-radius: 25px;
width: 360px;
height: 222px;
background-color: #ab2e12;
margin-bottom: 10px;
font-size: 0;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.material-symbols-outlined {
color: white;
font-size: 200px;
}
.title {
font-size: 60px;
color: white;
text-align: center;
}
&lt;/style&gt;

答案2

得分: 1

使用figcaption标签来为你的图片添加描述,然后你可以使用CSS来改变位置,使用.imgDiscription类。

<figure>
    <img src="..."/>
    <figcaption class="imgDiscription">这是一幅图片描述</figcaption>
</figure>

来源:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption

英文:

Use figcaption for your image, then you can change the location with CSS using the .imgDiscription class.

&lt;figure&gt;
&lt;img src=&quot;...&quot;/&gt;
&lt;figcaption class=&quot;imgDiscription&quot;&gt;This is an image 
discription&lt;/figcaption&gt;
&lt;/figure&gt;

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption

答案3

得分: 0

I have another problem with positioning. Like you can see in the "desc" section i have a problem with those elements. They are not in the same position and my next problem is with positioning the squares. The first element is positioned correctly, we can see a gap between the first element and the second element but between the second and third element we don't have a gap. The second and third description sections don't match their corresponding squares evenly. I pointed this out on the image. What could be the problem?

Another issue I have is with the size of the gaps between the title and the description in the first and third squares even though there is no gap in the middle square. Another problem is that the descriptions move around in uneven ways when I change their font size.

使用flexbox时出现问题。如何在行中添加新的div?

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<style type="text/css">

.box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main_txt{
 margin-top: 0px;
 text-align: center;
 text-shadow: 3px 3px 3px #a9a9a9;
 font-size: 40px;
}
.main_txt  h3
{
 margin-top: -8px;
 margin-bottom: -2px;
 font-weight: 400;
}

.font{
  margin-top: 10px;
  display: flex;
  flex-flow: row nowrap;
}

.square{
  border-radius: 25px;
  flex: 1;
  display: flex;
  width: 360px;
  height: 222px;
  background-color:#ab2e12;
  margin: 10px;
  font-size:0;
  text-align: center;
}

.material-symbols-outlined {
  align-items:center;
  justify-content: center;
  color: white;
  font-size: 200px;
    flex: 1;
  display: flex;
}

.title{
flex:1;
display: flex;
font-size: 25px;
font-weight:700;
}

.desc{
  flex:1;
  display:flex;
  align-items: flex-start;
  padding-top: 10px;
  border-top: 3px solid #ab2e12;
   border-bottom: 3px solid #ab2e12;
  font-size: 20px;
}

.box2 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about_us{

  display:flex;
  flex:1;
  font-size:20px;
  margin-top: 10px;
  text-align: justify;
}

.about_us_title{
  display:flex;
  flex:1;
  font-weight: 700;
  font-size:30px;
  margin-top: 20px;
}

@media (max-width: 800px) {
  .font, .title {
    flex-direction: column;
}
</style>
<div class="main_txt"><h3>Centrum Zarządzania <strong>Nieruchomościami</strong></h3></div>
<div class="font">

  <div class="box">
    <div class="square">
      <span class="material-symbols-outlined">attach_money</span>
    </div>
    <div class="title">Brak prowizji</div>
    <div class="desc">Nie pobieramy od Państwa żadnych prowizji</div>
  </div>


  <div class "box">
    <div class "square">
      <span class "material-symbols-outlined">campaign</span>
    </div>
    <div class "title">Kampania reklamowa</div>
    <div class "desc">Zajmujemy się profesjonalną kampanią reklamową. Zapraszamy do skorzystania z naszej darmowej miesięcznej kampani reklamowej.</div>
  </div>

  <div class="box">
    <div class="square">
      <span class="material-symbols-outlined">handshake</span>
    </div>
    <div class="title">Brak pośrednictwa</div>
    <div class "desc"> Nie pośredniczmy podczas pokazywania czy tudież sprzedaży nieruchomości. Umawiają oraz spotykają się Państwo indywidualnie.</div>
  </div>

  <div class="box">

  </div>
</div>
<div class "box2">
<div class "about_us_title"> O naszej firmie</div>
<div class "about_us">Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych, jak Aldus PageMaker.</div>
</div>
英文:

I have another problem with positioning. Like you can see in the "desc" section i have a problem with those elements. They are not in the same position and my next problem is with positioning the squares. The first element is positioned correctly, we can see a gap between the first element and the second element but between the second and third element we don't have a gap. The second and third description sections don't match their corresponding squares evenly. I pointed this out on the image. What could be the problem?

Another issue I have is with the size of the gaps between the title and the description in the first and third squares even though there is no gap in the middle square. Another problem is that the descriptions move around in uneven ways when I change their font size.

使用flexbox时出现问题。如何在行中添加新的div?

&lt;link href=&quot;https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&quot; rel=&quot;stylesheet&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0&quot; /&gt;
&lt;style type=&quot;text/css&quot;&gt;


.box {
    display: flex;
    flex-direction: column;
    align-items: center;  
    }

.main_txt{
 margin-top: 0px;
 text-align: center;
 text-shadow: 3px 3px 3px #a9a9a9;
 font-size: 40px;
}
.main_txt  h3
{
 margin-top: -8px;
 margin-bottom: -2px;
 font-weight: 400;
}

.font{
  margin-top: 10px;
  display: flex;
  flex-flow: row nowrap;
}

.square{
  border-radius: 25px;
  flex: 1;
  display: flex;
  width: 360px;
  height: 222px;
  background-color:#ab2e12;
  margin: 10px;
  font-size:0;
  text-align: center;
}

.material-symbols-outlined {
  align-items:center;
  justify-content: center;
  color: white;
  font-size: 200px;
    flex: 1;
  display: flex;
}

.title{
flex:1;
display: flex;
font-size: 25px;
font-weight:700;
}

.desc{
  flex:1;
  display:flex;
  align-items: flex-start;
  padding-top: 10px;
  border-top: 3px solid #ab2e12;
   border-bottom: 3px solid #ab2e12;
  font-size: 20px;
  }

.box2 {
    display: flex;
    flex-direction: column;
    align-items: center;  
    }

.about_us{

  display:felx;
  flex:1;
  font-size:20px;
  margin-top: 10px; 
  text-align: justify;
}

.about_us_title{
  display:felx;
  flex:1;
  font-weight: 700;
  font-size:30px;
  margin-top: 20px; 
}

@media (max-width: 800px) {
  .font, .title {
    flex-direction: column;
  }
}
&lt;/style&gt;
&lt;div class=&quot;main_txt&quot;&gt;&lt;h3&gt;Centrum Zarządzania &lt;strong&gt;Nieruchomościami&lt;/strong&gt;&lt;/h3&gt;&lt;/div&gt;
&lt;div class=&quot;font&quot;&gt;

  &lt;div class=&quot;box&quot;&gt;
    &lt;div class=&quot;square&quot;&gt;
      &lt;span class=&quot;material-symbols-outlined&quot;&gt;attach_money&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class=&quot;title&quot;&gt;Brak prowizji&lt;/div&gt;
    &lt;div class=&quot;desc&quot;&gt;Nie pobieramy od Państwa żadnych prowizji&lt;/div&gt;
  &lt;/div&gt;


  &lt;div class=&quot;box&quot;&gt;
    &lt;div class=&quot;square&quot;&gt;
      &lt;span class=&quot;material-symbols-outlined&quot;&gt;campaign&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class=&quot;title&quot;&gt;Kampania reklamowa&lt;/div&gt;
    &lt;div class=&quot;desc&quot;&gt;Zajmujemy się profesjonalną kampanią reklamową. Zapraszamy do skorzystania z naszej darmowej miesięcznej kampani reklamowaj.&lt;/div&gt;
  &lt;/div&gt;

  &lt;div class=&quot;box&quot;&gt;
    &lt;div class=&quot;square&quot;&gt;
      &lt;span class=&quot;material-symbols-outlined&quot;&gt;handshake&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class=&quot;title&quot;&gt;Brak pośrednictwa&lt;/div&gt;
    &lt;div class=&quot;desc&quot;&gt; Nie pośredniczmy podczas pokazywania czy tudież sprzedaży nieruchomości. Umawiają oraz spotykają się Państwo indywidualnie.&lt;/div&gt;
  &lt;/div&gt;

  &lt;div class=&quot;box&quot;&gt;
    
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;box2&quot;&gt;
&lt;div class=&quot;about_us_title&quot;&gt; O naszej firmie&lt;/div&gt;
&lt;div class=&quot;about_us&quot;&gt;Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem pr&#243;bnej książki. Pięć wiek&#243;w p&#243;źniej zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym r&#243;żne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druk&#243;w na komputerach osobistych, jak Aldus PageMaker&lt;/div&gt;
&lt;/div&gt;

huangapple
  • 本文由 发表于 2023年3月7日 21:21:52
  • 转载请务必保留本文链接:https://go.coder-hub.com/75662519.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定