Question

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

DIV1：位置是绝对的。它实际上是一个弹出窗口，用于在单击缩略图图像时查看较大版本的图像。它只是在屏幕上移动以使其显示，并在单击链接以关闭它时在屏幕外。由于内容可能会有所不同，因此没有固定的宽度或高度。

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

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

DIV4：没有属性，只是用于将DIV2和DIV3与其后面的DIV1的其他内容分开分组。

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

然而，DIV3相对于DIV2呈现垂直居中。我希望DIV3的顶部与DIV2的顶部一致。我已经阅读过使用position：absolute（在这种情况下在DIV3上）强制它到顶部，并且位置：相对于它们的容器（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中，简称为unders_image。

Answer 1

我做了JSFiddle，我觉得应该适合你的情况。

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

我在DIV4中使用了另一个名为DIV5的div并设置clear:both，因此它会低于DIV2和DIV3。

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

的示例

Answer 2

你可能想看看马修的3栏液体布局，可能就在你的街道上;正如其他海报所指出的那样，如果你不发布你的代码，我们就无法解决问题。

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

Answer 3

尝试使用带有显示内联/内联块/块的静态位置而不是浮点数。重置基本标签 - html和正文 - 清除浏览器默认值并包含高度：100％，这样您就可以为其子项设置高度。

提示：您可以使用带有vertical-align的内联块。

例如：

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

无法在容器DIV中定位2个DIV

3 个答案: