1

我很难让 3 个大小相同的图像正确浮动。我已将中心浮动图像的左右边距设置为自动，但它仍然不起作用。我的布局中的所有面板都向左浮动，这是我从教程中修改的，并且工作正常，因为它们相互对接，但是当空间超过必要时尝试浮动图像，不会按我想要的方式显示：等于图像左&中和中&右之间的间距。我的内容面板是 534px 宽，10px 填充占用 554px 加上 1px 边框加上 5px 外边距。图片都是 160px 宽，我给 FloatLeft 类设置了 10px 的右边距，FloatRight 类设置了 10px 的左边距，FloatCenter 设置了左右两边的自动边距。FloatLeft 和 FloatRight 都在多个页面上使用，

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

有没有其他选择（除了桌子）。我可以将它们全部向左对齐并设置边距：右属性 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;
}
4

4 回答 4

0

我正在努力，尽可能让事情变得简单。我更愿意知道我正在应用的代码是如何工作的，而不是在没有完全理解的情况下使用解决方案。我不知道 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。

于 2012-09-13T15:09:38.210 回答
0

您float:center;在.FloatCenter课堂上使用，这是无效的，没有center价值float，放置float:none;并更改您的边距长度；

.FloatCenter {
  float: none;
  margin: 0 auto 10px 15px;
}
于 2012-09-11T23:34:26.903 回答
0

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

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;
}
于 2012-09-11T22:52:30.863 回答
0

我最近使用text-align: justify;. 完整的讨论可以在“text-align: justify;”中找到。内联块元素正确吗？，对优缺点和替代解决方案进行了很好的讨论。

这是一个小提琴，展示了如何使用所讨论的技术排列三个图像。它应该可以在所有主要浏览器中运行，尽管您可以随意踢轮胎并在遇到问题时与我联系。

于 2012-09-11T23:01:09.680 回答