Question

我似乎真的错过了一些关于如何使用CSS在屏幕上的一个块中水平排列三个图像的东西。我似乎只能在页面的一个长行中排列它们（当我真的希望它们以水平线穿过屏幕时）。我的div在哪里做错了？或者也许我被CSS误入歧途？有任何想法吗？非常感谢你。

＆＃13;

.taco_container {
  width: 300px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: auto;
  margin-right: auto;
}

＆＃13;

<div id="taco_container">
    <div class="taco">
       <a href="tacogame_choose_1.html">
          <img src="images/tacoone.png" style="width:304px;height:228px">
       </a>
    </div>
    <div class="taco">
       <a href="tacogame_choose_2.html">
          <img src="images/tacotwo.png" style="width:304px;height:228px">
       </a>
    </div>
    <div class="taco">
       <a href="tacogame_choose_3.html">
          <img src="images/tacothree.png">
       </a>
    </div>
</div>

＆＃13;

Answer 1

您必须将display件设为inline-block并设置text-align: center。

.taco_container {
    width: 100%;
}
.taco {
    width: 33%;
    display: inline-block;
    text-align: center;
}

小提琴：http://jsfiddle.net/2xo1gr6w/

Answer 2

点击此处查看示例：inline：http://jsfiddle.net/y1tuLyzg/

#taco_container {
  width: 300px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: auto;
  margin-right: auto;
    padding:0;
}
#taco_container .taco {
    display:inline-block;
    width:33%;
    height:100px;
}
#taco_container .taco img {
    max-width:100%;
    margin:0;
    padding:0;
}

Answer 3

您的解决方案可能是：demo 我只添加了类：“img_class”并删除了内联样式表

.taco_container {
  width: 300px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: auto;
  margin-right: auto;
}
.img_class{width:33%;
    float:left;
    height:auto;
}

<div id="taco_container">
    <div class="taco">
       <a href="tacogame_choose_1.html">
          <img  class="img_class" src="images/tacoone.png">
       </a>
    </div>
    <div class="taco">
       <a href ="tacogame_choose_2.html">
          <img class="img_class" src="images/tacotwo.png" >
       </a>
    </div>
    <div class="taco">
       <a href="tacogame_choose_3.html">
          <img  class="img_class" src="images/tacothree.png">
       </a>
    </div>
</div>

Answer 4

几乎！您只需将display:inline-block;添加到.taco：

.taco {
    display:inline-block;
}

EXAMPLE（原谅小猫他们就是一个例子）

同样taco_container的宽度为300px，每张图片的宽度为304px，因此您需要相应地增加taco_container的宽度以适应图像。

Answer 5

.taco_container {
  width: 300px;  <!-- wrapping div is smaller than the divs you trying to put in it-->
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: auto;
  margin-right: auto;
}

<div id="taco_container">
    <div class="taco">
       <a href="tacogame_choose_1.html">
          <img src="images/tacoone.png" style="width:304px;height:228px">
       </a>
    </div>
    <div class="taco">
       <a href="tacogame_choose_2.html">
          <img src="images/tacotwo.png" style="width:304px;height:228px">
       </a>
    </div>
    <div class="taco">
       <a href="tacogame_choose_3.html">
          <img src="images/tacothree.png">
       </a>
    </div>
</div>

你的包装div或容器是300px但你试图将3个宽度为304px的div放入其中。

Answer 6

.taco_container {
  width: 100%;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: auto;
  margin-right: auto;
}
.taco { display: inline-block;
width:30%;}

<div id="taco_container">
    <div class="taco">
       <a href="tacogame_choose_1.html">
          <img src="images/tacoone.png" style="height:228px">
       </a>
    </div>
    <div class="taco">
       <a href="tacogame_choose_2.html">
          <img src="images/tacotwo.png" style="height:228px">
       </a>
    </div>
    <div class="taco">
       <a href="tacogame_choose_3.html">
          <img src="images/tacothree.png">
       </a>
    </div>
</div>

水平对齐三个图像（只能使它们垂直）

6 个答案: