Question

我很难获得3张相同大小的图像以正确浮动。我已将中心浮动图像上的左右边距设置为自动，但仍然无效。我的布局中的所有面板都是左侧浮动的，我从教程中修改并且工作正常，因为它们彼此对接，但是当空间超出必要时尝试浮动图像时，不会按我的要求显示：相同左右图像之间的间距中心和中心＆amp;对。我的内容面板宽534像素，10px填充占用554px加1px边框加上外围5px边距。图像都是160px宽，我给了FloatLeft类10px右边距，FloatRight类左边距10px，FloatCenter左边和右边都是自动边距。 FloatLeft和FloatRight都用在几个页面上，文本包围，很好。

好的，更新 - 我现在意识到浮动：中心是不可能的，DUH！，这是问题 - 我只是几个月进入CSS等。

是否有其他选择（除了表格）。我可以将它们全部对齐并制作边距：右边属性27px（160px x 3图像+ 27 + 27 = 534px）但是我需要专门为这些图像创建一个新的FloatLeft类。关于对齐图像的最佳方法的任何建议都将非常感激。

加里。

相关的HTML＆amp; CSS：

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Solar Power Today</title>
<link rel="stylesheet" type="text/css" href="solarpower.css">
</head>
<body>
  <div id="wrapper">
  ...........
  <!-- header panel, then horizontal navigation panel then left panel then ... -->
  ..........
  <div id="content">
  <!-- main content -->
  <h1 id="contentheader">Introduction to Solar Power</h1>
  <p>
  <img class="FloatLeft" src="images/sunonsolarpanelroof160px.jpg" alt="Sun shining
  on roof solar panels" width="160" height="160">
  <img class="FloatCenter" src="images/smallwindturbine160px.jpg" alt="Small wind
  turbine spinning" width="160" height="160">
  <img class="FloatRight" src="images/waveturbine160px.jpg" alt="Wave turbines in
  motion" width="160" height="160">
  </p>


CSS:

* {padding:0; margin:0; border:0;}

.FloatLeft {
  float: left;
  margin: 0 10px 10px 0;
}
.FloatRight {
  float: right;
  margin: 0 0 10px 10px;
}
.FloatCenter {
  float: center;
  margin: 0 auto 10px auto;
}

#content {
  width: 534px;
  min-height: 400px;
  margin: 0px 5px 5px 0px;
  padding: 10px;
  float: left;
  border: 1px solid black;
  display: inline;
}

Answer 1

这是您实现所需目标的一种方式：

http://jsfiddle.net/CsjYN/1/

HTML：

<div id="content">

  <h1 id="contentheader">Introduction to Solar Power</h1>

  <div class="images">
   <img class="img-left" src="images/sunonsolarpanelroof160px.jpg" alt="Sun shining on roof solar panels" />

   <img class="img-center" src="images/smallwindturbine160px.jpg" alt="Small wind turbine spinning" />

   <img class="img-right" src="images/waveturbine160px.jpg" alt="Wave turbines in motion" />
  </div>

</div>

CSS：

#content {
 width: 534px; /* full width 556px */
 padding: 10px;
 border: 1px solid #000;
}

#content h1 {
 margin-bottom:20px;
}
#content .images {
 overflow:auto;
}
#content .images img {
 width:160px;
 height:60px;
 float:left;
}
#content .images img.img-left,
#content .images img.img-center {
 margin-right:27px;
}

Answer 2

我最近使用text-align: justify;解决了未知宽度内等间距和任意数量元素的问题。完整的讨论可以在“text-align: justify;” inline-block elements properly?找到，并对优缺点和替代解决方案进行了很好的讨论。

这是一个fiddle，显示如何使用所讨论的技术排列三个图像。它应该可以在所有主流浏览器中使用，但是可以放心使用并回答问题。

Answer 3

您在float:center;课程中使用.FloatCenter，这是无效的，center没有float值，请float:none;并填写您的保证金长度;

.FloatCenter {
  float: none;
  margin: 0 auto 10px 15px;
}

Answer 4

我正在努力，尽量保持简单。我更愿意知道我应用的代码是如何工作的，而不是在没有完全理解它的情况下使用解决方案。我不知道text-align可以帮助对齐图像，所以我玩了一下。直到我完全理解上面的text-align：justify解决方案已经失去了一些，我已经将3个图像中的每一个放在一个新的div容器类中.ImageBox：

.ImageBox {
  width: 178px;
  margin-bottom: 10px;
  float: left;
}

然后我将每个图像放在

元素中，并在

元素上使用内联样式来对齐图像位置：

<div class="ImageBox">
<p style="text-align: left"><img src="images/sunonsolarpanelroof160px.jpg" alt="Sun
  shining on roof solar panels" width="160" height="160"></p>
</div>
<div class="ImageBox">
<p style="text-align: center"><img src="images/smallwindturbine160px.jpg" alt="Small
  wind turbine spinning" width="160" height="160"></p>
</div>
<div class="ImageBox">
<p style="text-align: right"><img src="images/waveturbine160px.jpg" alt="Wave turbines
  in motion" width="160" height="160"></p>
</div>

我知道内联样式是不受欢迎的，但它使用的代码少于为每个图像创建一个单独的div容器，并将每个div容器中的text-align属性设置为样式表中的左，中或右。我还意识到，只是指定宽度和/或高度属性甚至边框（用于测试目的）都不会在浏览器中显示div容器。 div容器类似乎需要float或clear属性才能生效。我需要学习更多的CSS。

3个浮动图像不会以相等的间距出现

4 个答案: