3 张浮动图像不以相等的间距显示

我很难获得3个相同大小的图像来正确浮动。我已经将中间浮动图像的左右边距设置为自动，但它仍然不起作用。我布局中的所有面板都是向左浮动的，这是我从教程中修改的，当它们相互对接时效果良好，但当空间超过必要空间时，尝试浮动图像并不能按我的意愿显示：图像之间的间距相等；居中和居中&正确的我的内容面板宽534px，10px填充占554px，加上1px边框，再加上外部5px边距。这些图像都是160像素宽的，我给FloatLeft类一个10px的右边距，FloatRight类一个10 px的左边距，FloatCenter一个左右自动边距。FloatLeft和FloatRight都用于多个页面，并被文本包围，这很好。

好的，更新-我现在意识到浮动：中心是不可能的，DUH！，这就是问题所在——我才刚开始学习CSS等几个月。！

除了桌子，还有其他选择吗。我可以将它们全部向左对齐，并使margin:right属性为27px（160px x 3个图像+27+27=534px），但随后我需要为这些图像创建一个新的FloatLeft类。任何关于对准图像的最佳方法的建议都将不胜感激。

加里。

相关的HTML&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;
}

我最近使用text-align: justify;解决了在未知宽度上等距和任意数量元素的问题。完整的讨论可以在"文本对齐：对齐；"内联块元素是否正确？，就利弊和备选解决方案进行了良好的讨论。

这里有一个小提琴展示如何使用讨论的技术排列三个图像。它应该适用于所有主要的浏览器，尽管有问题可以随时联系我。

您在.FloatCenter类中使用float:center;，这是无效的，float没有center值，请放入float:none;并更改您的边距长度；

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

我正在尽可能地保持简单。我更想知道我正在应用的代码是如何工作的，而不是在没有完全理解的情况下使用解决方案。我不知道文本对齐可以帮助对齐图像，所以我对此进行了尝试。在我完全理解上面的文本align:ajustify解决方案之前，我已经将这3个图像中的每一个放在一个新的div容器类中。ImageBox:

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

然后，我将每个图像放在

元素中，并在<p]元素上使用内联样式来对齐图像位置：>

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

以下是实现您想要的目标的一种方法：

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

相关内容

最新更新

热门标签：