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 =＆＃34;标记＆＃34;

的外部

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

您图片的某些src属性没有关闭＆＃34;在他们身上，所有人都指向我们无法访问的内部图像。

之间的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;
}

Div标签没有移动任何东西

2 个答案: