Question

所以我有一张桌子，我正在尝试制作。基本上，它将是两行，每行三个图像，每个图像下面都有非常短的文本。

我的结构如下：

<div class="mission-statement-1">
  <div class="iconDiv">
    <img src="img.jpg" />
    <span>Some text</span>
  </div>
  <div class="iconDiv">
    <img src="img.jpg" />
    <span>Some text</span>
  </div>
  <div class="iconDiv">
    <img src="img.jpg" />
    <span>Some text</span>
  </div>
</div>

<div class="mission-statement-2">
  <div class="iconDiv">
    <img src="img.jpg" />
    <span>Some text</span>
  </div>
  <div class="iconDiv">
    <img src="img.jpg" />
    <span>Some text</span>
  </div>
  <div class="iconDiv">
    <img src="img.jpg" />
    <span>Some text</span>
  </div>
</div>

我有两个带有显示的主要div元素：宽度为100％的块，因此它们是一个在另一个之下。内部div显示：内联，因此它们将彼此相邻，并且宽度为30％。

如果我只有图像，这可以按预期工作。但是，我正在尝试将文本置于每个图像的下方，添加文本会弄乱预期的布局。如果我使用块文本元素，例如p，那么我将分别有六行，每行一个。如果我坚持使用跨度，那么文本会出现在图像之后（因为它应该给出它的内联属性）。我似乎无法按照我想要的方式工作。

任何帮助？

Answer 1

尝试使用Flex和一些CSS。它还可以作为一种更好的方式来获得一个移动友好的响应表。另外，使用标签Figure和FigCaption，它基本上将文本粘贴到图像上。

.parent-wrapper {
    height:100%;
    width:100%;
   
}
.parent {
    display: flex;
    flex-wrap: nowrap;
    margin:-10px 0 0 -10px;
}
.child {
    display: inline-block;
    margin:10px 0 0 10px;
    flex-grow: 1;
    height:150px;
}

<body>
    <div class="parent-wrapper">
        
        <div class="parent">
            <div class="child"><figure><img src="http://media.nbcwashington.com/designimages/ots_dark_wx_103.png" /><figcaption>Some text</figcaption>
            </figure></div>
            <div class="child"><figure><img src="http://media.nbcwashington.com/designimages/ots_dark_wx_103.png" /><figcaption>Some text</figcaption>
            </figure></div>
            <div class="child"><figure><img src="http://media.nbcwashington.com/designimages/ots_dark_wx_103.png" /><figcaption>Some text</figcaption>
            </figure></div>
        </div>    
        
        <div class="parent">        
         <div class="child"><figure><img src="http://media.nbcwashington.com/designimages/ots_dark_wx_103.png" /><figcaption>Some text</figcaption>
            </figure></div>
            <div class="child"><figure><img src="http://media.nbcwashington.com/designimages/ots_dark_wx_103.png" /><figcaption>Some text</figcaption>
            </figure></div>
            <div class="child"><figure><img src="http://media.nbcwashington.com/designimages/ots_dark_wx_103.png" /><figcaption>Some text</figcaption>
            </figure></div>
        </div>
        
    </div>        
              
</body>

Answer 2

尝试提供内心div s display: inline-block;。

inline-block元素保持block样式的支持，例如定义的宽度和高度，但可以在inline元素等其他对象旁边呈现。

Answer 3

.mission-statement-1,
.mission-statement-2{
display:block;
}
.iconDiv{
display:inline-block;
text-align:center;
}
img{
background-color:green;
width:100%;
height:100%;
}

<div class="mission-statement-1">
  <figure class="iconDiv">
    <img src="img_pulpit.jpg" alt="The Pulpit Rock">
    <figcaption>Some text1</figcaption>
  </figure>
  <figure class="iconDiv">
    <img src="img_pulpit.jpg" alt="The Pulpit Rock">
    <figcaption>Some text2</figcaption>
  </figure>
  <figure class="iconDiv">
    <img src="img_pulpit.jpg" alt="The Pulpit Rock" >
    <figcaption>Some text3</figcaption>
  </figure>
</div>

<div class="mission-statement-2">
  <figure class="iconDiv">
    <img src="img_pulpit.jpg" alt="The Pulpit Rock" >
    <figcaption>Some text4</figcaption>
  </figure>
  <figure class="iconDiv">
    <img src="img_pulpit.jpg" alt="The Pulpit Rock">
    <figcaption>Some text5</figcaption>
  </figure>
  <figure class="iconDiv">
    <img src="img_pulpit.jpg" alt="The Pulpit Rock" >
    <figcaption>Some text6</figcaption>
  </figure>
</div>

你可以使用Html图和figcaption标签。

Answer 4

这是一个关于flex的示例，以及可以设置为在需要时让内容换行的断点。你可以从中激励自己并深入研究flex here

下面的代码段使用figure和figcaption，专用于此类内容的HTML代码，以及CSS部分的flex和flex-wrap。

min或max-width可用于增强样式并设置一些基本断点，除非您还想要或仅使用媒体查询。

.imgcpt {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

figure {
  flex: 1 1 30%;
  margin: 5px;
  border: solid;
  min-width: 300px;
  text-align: center;
}

figure img {
  width: 100%;
  max-width: 800px;
}

figcaption>* {
  margin: 0.25em
}

<div class="imgcpt">
  <figure>
    <img src="http://lorempixel.com/200/100/" alt="i show ..." />
    <figcaption>
      <h1>title</h1>
      <p>Or just simple text caption</p>
      <p>Or just simple text caption</p>
      </figcaption>
  </figure>
  <figure>
    <img src="http://lorempixel.com/201/100/" alt="i show ..." />
    <figcaption>
      <h1>title</h1>
      <p>Or just simple text caption</p>
      </figcaption>
  </figure>
  <figure>
    <img src="http://lorempixel.com/202/102/" alt="i show ..." />
    <figcaption>
      <p>Or just simple text caption</p>
      </figcaption>
  </figure>
  <figure>
    <img src="http://lorempixel.com/203/103/" alt="i show ..." />
    <figcaption>
      <h1>title</h1>
      <p>Or just simple text caption</p>
      </figcaption>
  </figure>
  <figure>
    <img src="http://lorempixel.com/204/104/" alt="i show ..." />
    <figcaption>
      <h1>title</h1>
      <p>Or just simple text caption</p>
      </figcaption>
  </figure>
  <figure>
    <img src="http://lorempixel.com/205/105/" alt="i show ..." />
    <figcaption>
      <h1>Single title</h1>
      </figcaption>
  </figure>
  <figure>
    <img src="http://lorempixel.com/206/106/" alt="i show ..." />
    <figcaption>
      <h1>title</h1>
      <p>Or just simple text caption</p>
      </figcaption>
  </figure>
</div>

在整页中运行代码段或使用它并编辑@ http://codepen.io/gc-nomade/pen/dvoQyR

使用flex时，不必使用CSS。

使用div元素的交替块和内联行为？

4 个答案: