-2

我有一个容器（DIV4），它并排包含另外两个 DIV（DIV2 和 DIV3）。DIV4 包含在另一个 DIV (DIV1) 中。关于每个 DIV 的一些信息：

DIV1：位置是绝对的。它本质上是一个弹出窗口，用于在单击缩略图图像时查看图像的放大版本。它只是在屏幕上移动以使其显示，并在单击链接以关闭它时离开屏幕。由于内容可以变化，它没有固定的宽度或高度。

DIV2：一系列嵌套的 DIV，它们包含大图像，并使用嵌套的 DIV 为图像生成框架和遮罩。带有图像本身（作为背景图像）的 DIV 具有指定的宽度和高度；外部 DIV（包括 DIV2）没有，它们只是使用它们的边距和边框设置来适应其中包含的 DIV。

DIV3：包含一系列 P 和 INPUT 标签，带有 BR 标签可以轻松控制它们的垂直位置。

DIV4：无属性，仅用于将 DIV2 和 DIV3 与它们下面的 DIV1 的其他内容分开分组。

最初，我尝试使用 float: left on DIV2 将 DIV3 带到它旁边。但是，我认为问题在于 DIV1 和 DIV4 没有指定的宽度，因此浏览器不知道是否有足够的空间将 DIV3 移动到 DIV2 旁边。在 IE 中，它正确定位了 DIV3，但 Firefox 将所有 DIV3 置于 DIV2 以下。所以我寻找了除花车之外的另一种解决方案。我能够在 DIV2 和 DIV3 上使用 display: inline-block。这使它们在两个浏览器中并排放置。

但是，DIV3 相对于 DIV2 显示为垂直居中。我希望 DIV3 的顶部与 DIV2 的顶部一致。我已经阅读了关于使用 position: absolute （在这种情况下是在 DIV3 上）将其强制到顶部，并且 position: relative 在他们的容器（DIV4）上，但我还必须为 DIV3 指定一个左侧位置，因为DIV2 变化，那将是一个问题。

我没有发布任何代码，因为我不确定哪些部分有用，并且 DIV 的全部内容及其 CSS 将是代码页（一些 DIV 是使用 PHP/MYSQL 动态编写的）。希望我对情况的描述是足够的。

这是我希望它看起来如何的图像：http: //i46.tinypic.com/qstks1.gif

再一次，我认为我在使用浮动或绝对定位的标准解决方案时遇到的主要问题是每个 DIV 的高度和宽度都是可变的。我几乎用内联块解决了这个问题，除了 DIV3 相对于 DIV2 的垂直定位。

编辑：根据请求，我在 JSFiddle 上放了一些代码。但是，显示的结果与它的实际外观完全不同，我知道会是这样。此代码包含在另一个 php 文件中，该文件本身包含在 index.php 中。根据标准 MVC 实践，大部分 php 变量都设置在 index.php 中。因此，如果不访问所有其他文件，它根本就无法真正工作，更不用说它从中获取图像文件名的 MySQL 数据库（以及它用来确定图像的高度和宽度）。http://jsfiddle.net/Technetium/GKUgY/

出于某种原因，它不会让我在没有将代码嵌入的情况下提交这个（他们真的希望我把整个东西放在这里吗？），所以这里有一些虚假代码，只是为了让我编辑帖子......忽略这个。$sense=false;

这是整个 imageviewer.php 文件和整个 CSS 文件。在原来的帖子中，我简化了 DIV 名称，所以使用这个键： DIV1 = imageviewer（它是在 echo 语句中创建的，所以你不会在通常的 DIV 标签颜色下找到它），DIV2 = black_frame，DIV3 = right_of_image，和 DIV4 = image_plus_prints。底部的东西都在它自己的 DIV 中，简称为 below_image。

4

3 回答 3

0

您可能想看看 Matthew 的 3 列液体布局，很可能在您的街道上；正如其他海报指出的那样，如果您不发布代码，我们将无法解决问题。

http://matthewjamestaylor.com/blog/perfect-3-column.htm

于 2012-12-24T18:14:40.990 回答
0

尝试使用带有显示内联/内联块/块的静态位置而不是浮动。重置基本标签 - html 和 body - 以清除浏览器默认值并包括height:100%，因此您可以为其子项设置高度。

提示：您可以将 inline-block 与垂直对齐一起使用。

前任：

html, body{margin:0; padding:0; width:100%; height:100%; background:#eee;}
div{margin:0; padding:0; }


#div1{ margin:0 auto 0 auto; width:90%; height:100%; background:#fff; top:0; bottom:0; display:block; padding:10px 0; }
#div4{width:90%; height:80%; display:block; background:#eee; margin:0 auto 0 auto; padding:10px 0;}
#div2{ width:66%; margin-right:3%; height:auto; display:inline-block; border:#aeaeae solid 1px;}
#div3{ width:30%; height:auto; display:inline-block; border:#aeaeae solid 1px;}

<div id="div1"><!--full container -->
<div id="div4"> <!--principal -->
    <h1>Content</h1>
    <p>
    Left floating and relative position are trouble. Use display:inline/inline-block/block instead.

</p>

        <div id="div2"><!--content --> middle </div>

        <div id="div3"> <!--right side--> aside </div>


</div>

other content
</div><!--close all -->
于 2012-12-26T11:45:03.300 回答
0

我制作了一个JSFiddle，我认为它应该适合您的情况。

（没关系。如果重新定位窗口，则 DIV2 和 DIV3 不会并排放置......但是......我现在正在努力解决这个问题。我认为这与 DIV1 没有设置大小有关，所以它会调整自己的大小，这会使其他 div 移动）

我在 DIV4 内部使用了一个名为 DIV5 的附加 div 并进行了设置clear:both，使其低于 DIV2 和 DIV3。

另外，请阅读这个 CSS 定位示例http://www.barelyfitz.com/screencast/html-training/css/positioning/

于 2012-12-24T18:11:29.467 回答