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

【问题标题】：Alternating block and inline behavior with div elements?使用 div 元素交替块和内联行为？
【发布时间】：2017-02-27 17:43:20
【问题描述】：

所以我有一张我正在尝试制作的桌子。从本质上讲，它将是两行，每行三张图片，每张图片下方都有很短的文字。

我的结构是这样的：

<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>

我有两个带 display: 宽度的主要 div 元素：宽度为 100% 的块，这样它们就会在另一个之下。内部 div 是 display: inline，因此它们彼此相邻，宽度为 30%。

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

有什么帮助吗？

【问题讨论】：

您可以使用display: table 和其他与表格相关的 CSS 元素，或者更好地查看 flexbox。
您可以将图像和跨度包装在另一个跨度中
你可以试试html标签
Fig.1 -挪威讲坛岩石的景色。
图片尺寸是多少？，他们是否假设要填满容器的整个宽度，是否需要考虑最大和最小宽度，这些盒子是不是要在小屏幕上堆叠在一起，？到目前为止，您尝试过什么 CSS？
你在说什么？这可能很容易解决，但您需要清楚地描述它。

标签： html css

【解决方案1】：

试着给你内心的divs display: inline-block;。

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

【讨论】：

【解决方案2】：

.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 figure 和 figcaption 标签。

【讨论】：

【解决方案3】：

尝试将 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>

【讨论】：

【解决方案4】：

这是一个关于flex 的示例，如果需要，可以设置让内容换行的断点。你可以从中激发灵感并深入了解 flex here

下面的 sn-p 使用 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>

在整页中运行 sn-p 或玩它并编辑它@http://codepen.io/gc-nomade/pen/dvoQyR

在使用 flex 时不必使用太多 CSS。

【讨论】：