潜水标签没有移动任何东西

Question

我在div标记中包含了一些项目，我试图使图像和文本水平排列，从而达到页面的最大长度，并溢出到下一行，从而形成水平列表，而不是垂直列表（无论如何，在我的理论中）。然而，当我试图对这个div标记进行任何更改时，我根本没有更改？

CSS：

.change{
width: 100%
min-width: 400px;
max-width: 960px;
margin: 0 auto;
white-space: pre-wrap;}

HTML和注释中的完整代码：&

http://jsfiddle.net/g2m7fsoe/1/

Answer 1

在主div内为每个项目指定一个div，并将float:left;指定给项目div

Answer 2

你的标记和CSS有一些问题。

你实际上有这个

<div id= "flag">
   <div id="flag1"> ... </div>
   <div id="flag1"> ... </div>
   <div id="flag1"> ... </div>

关闭id="flag"的外部

所有这些内部div元素实际上都有相同的ID，应该切换到一个类。CSS不将任何样式应用于任何ID，因为它只将样式应用于类。

图像的一些src属性上没有"关闭"，所有这些属性都指向我们无法访问的内部图像。

之间的CSS存在差异

.flag{ .. }        // apply to class

和

#flag { ... }      // apply to id

试试这个

<div id="flags">
  <div class = "flag">
     <span>A - ALPHA</span>
     <img src="..." title="..." border= "1"/>
  </div>
  <div class = "flag">
     <span>B - BRAVO</span>
     <img src="..." title="..." border= "1"/>
  </div>
  <div class = "flag">
     <span>C - CHARLIE</span>
     <img src="..." title="..." border= "1"/>
  </div>
</div>

假设你的标志是120像素宽，大约60像素高，那么像这样的初始CSS将一次生成8行标志：

#flags {
  width: 100%
  min-width: 400px;
  max-width: 960px;
  margin: 0 auto;
}
.flag {
  float:left;
  display:inline-block;
  width:120px;
  height:100px;
  background-color:pink;
}
.flag span {
  display:block:
  width:100%
  height:40px;
}
.flag img {
  display:block:
  width:100%;
  height:60px;
}