创建类似的网站容器

时间:2018-06-07 14:15:13

标签: javascript html css css3 flexbox

我尝试在网站上显示类似的内容:

  • 彼此相邻排列的3个圆形图像
  • 每个图像下方的中心标题(“就绪”,“添加”,“zap”)
  • 每张图片下方的中心内容文字(“制作您自己的......”,“......”)

  • 两个按钮以三个图像的宽度为中心

image1

我很确定我必须使用display: flex,但因为我对 flex 完全不熟悉我真的不知道如何创建像你这样的容器见顶部的图片。

这是我到目前为止所获得的代码(尚未完成,但我不知道该如何继续) - 所以任何帮助都会非常感激。 :)

.main {
  display: flex;
  flex-direction: column;
}

#container {
  display: flex;
  width: 100%;
}

#container>div {
  display: flex;
  flex-direction: column;
}


#container>div>img {
  max-width:80%;
}
<div class="main">
  <div id="container">
    <div>
      <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
      <h3>Heading 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod</p>
    </div>
    <div>
      <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
      <h3>Heading 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ull</p>
    </div>
    <div>
      <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
      <h3>Heading 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure</p>
    </div>
  </div>
</div>

6 个答案:

答案 0 :(得分:3)

我会在每个列中包含text-align: center的div:

#container {
  display: flex;
  flex-direction: row;
  /* line up divs in a row (ie make the inner divs columns */
  flex-wrap: wrap;
  /* allows the columns to wrap to the next row */
  justify-content: space-between;
  /* adds space in between the columns that fit on the same line */
}

.column {
  flex-basis: 30%;
  /* 30% allows 5% space between each top row column */
  text-align: center;
  /* centre inner content of column */
}

.column img {
  max-width: 100%;
}

.context {
  flex-basis: 100%;
  padding: 1em 0;
  /* 48% allows 4% space between buttons */
  text-align: center;
}

.button {
  flex-basis: 48%;
  /* 48% allows 4% space between buttons */
  text-align: center;
  border: 1px solid black;
}
<div id="container">
  <div class="column">
    <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <h1>This is the heading 1</h1>
    <p>some text below the heading!</p>
  </div>
  <div class="column">
    <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <h1>This is the heading 2</h1>
    <p>some text below the heading!</p>
  </div>
  <div class="column">
    <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <h1>This is the heading 3</h1>
    <p>some text below the heading!</p>
  </div>
  <div class="context">lots of centered text can goe here or just delete this if not needed!</div>
  <div class="button left">button 1</div>
  <div class="button right">button 1</div>
</div>

答案 1 :(得分:0)

由于flex只允许一个方向,你必须开始包装你的元素,以便根据你的喜好对齐它们。

&#13;
&#13;
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main {
  display: flex;
  flex-direction: column;
}

#container {
  display: flex;
  width: 100%;
}

#container>div {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#container>div>h3 {
  align-self: center;
}

#container>div>img {
  max-width: 100%;
}

.btns {
  display: flex;
}

.btns>button {
  flex: 1;
}
&#13;
<div class="main">
  <div id="container">
    <div>
      <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
      <h3>Heading 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod</p>
    </div>
    <div>
      <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
      <h3>Heading 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ull</p>
    </div>
    <div>
      <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
      <h3>Heading 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure</p>
    </div>
  </div>
  <div class="btns">
    <button>Text</button>
    <button>Text again</button>
  </div>
</div>
&#13;
&#13;
&#13;

Using CSS Grid

&#13;
&#13;
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

ul>li>img {
  max-width: 100%;
}

ul>li>h3 {
  text-align: center;
}

.btnsContainer {
  font-size: 0;
  grid-column: 1/4
}

.btnsContainer>button {
  width: 50%;
  font-size: 16px;
}
&#13;
<ul>
  <li>
    <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <h3>Heading 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod</p>
  </li>
  <li>
    <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <h3>Heading 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ull</p>
  </li>
  <li>
    <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <h3>Heading 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure</p>
  </li>
  <li class="btnsContainer">
    <button>Text</button>
    <button>Text again</button>
  </li>
</ul>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

您不需要img来实现此结果。您必须使用正确的HTML结构,然后应用样式。

您应该将每对labeldiv包裹在.sub内。我给了它一个班级名.sub。要将三个width: 30%定位为三个宽度相等的列,您可以在前两个上设置margin: auto,在最后一个上设置.sub

inline-block的显示属性设置为.container { width: 100%; text-align: center; } .sub { display: inline-block; width: 30%; padding: 10px; } .sub > img { width: 100%; } sub:last-child { width: auto; }并完成作业:

&#13;
&#13;
<div class="container">
  <div class="sub">
    <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <div>This is the heading 1</div>
  </div>
  <div class="sub">
    <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <div>This is the heading 2</div>
  </div>
  <div class="sub">
    <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <div>This is the heading 3</div>
  </div>
</div>
&#13;
{{1}}
&#13;
&#13;
&#13;

答案 3 :(得分:0)

这样的事情:

#container
{
  display: flex;
  justify-content: space-around;
}

#container .element
{
  text-align:center;
}

您还可以替换&#34; space-around&#34; by&#34; center&#34;或&#34;空间 - &#34;并检查它是否更适合您的整体设计。

在一个单独的div中创建3个块(包含图像,标题,文本),并为它们添加一个类(&#34;元素&#34;上面)。

答案 4 :(得分:0)

要学习flexbox,您可以使用这个有趣的免费游戏:https://flexboxfroggy.com/

.container{
display:flex;
flex-direction:row;/*put the items inside the container in a row*/
justify-content:space-around;/*items are separated with space*/
margin-top:10%;

}
figcaption {
text-align:center;
margin-top:5%;}

img{
width:200px;
border-radius:50%;

}
.column{

}

button{
display:block;/*because input tag are inline by default*/
width:48%;
margin-left:1%;
text-align:center;
background:green;
height:40px;

}
</head>
<body>
<div class="container">

  <div class="column">
    <img alt="" src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <figcaption>This is the heading 1</figcaption>
  </div>
  <div class="column">
    <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <figcaption>This is the heading 1</figcaption>
  </div>
  <div class="column">
    <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <figcaption>This is the heading 1</figcaption>
  </div>


</div>
<div class="container">
  <button type = "submit">button 1</button>
  <button type="submit">button 2</button>
<div>
</body>
</html>

答案 5 :(得分:0)

基本上你必须为子div设置flex-basis百分比,并将它们与center对齐。在这里,我使用类名item执行此操作,并使用display:flexjustify-content: space-between设置父div。

注意:根据您的方便,您也可以使用space-around代替space-between

HTML

<div class="container bxp">
 <div class="item item1">
  <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
  </div>
  <div  class="item item2">
  <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
  </div>
  <div  class="item item3">
  <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
  </div>
</div>

CSS

.bxp{
  max-width: 1000px;
  display:flex;
  margin:auto;
  justify-content:space-between;
}
.item{
  box-sizing:border-box;
  flex-basis: 30%;
  text-align: center;
}
img{
  width:100px;
}