Question

这让我很难过。尝试各种代码选项。

在我的测试网站上，我希望彼此相邻显示两个元素。

我尝试了一些精简代码，但两者仍然在彼此之下。高度很重要，因为一方包含来自数据库的2个项目，另外5个方面，因此要使两个方框的长度相同，我需要包含高度。

<div style="height: 340px; width:100%; white-space:nowrap;">
<div style="width: 49%;  width: calc(50% - 8px);   width: -moz-calc(50% - 8px);  width: -webkit-calc(50% - 8px); height: 340px; ">
    <!-- START ARTICLE POSITION 1 -->
    <div style="height: 170px;">text</div>
    <!-- START ARTICLE POSITION 2 -->
    <div style="height: 150px;">
        <div style="padding-top: 10px;">text</div>
    </div>
</div>
<div style=" background: #eee; width: 49%;  width: calc(50% - 8px);   width: -moz-calc(50% - 8px);  width: -webkit-calc(50% - 8px); ">
    <!-- START ARTICLE POSITION 1 -->
    <div style=" height: 48px; overflow: hidden;">text</div>
    <!-- START ARTICLE POSITION 2 -->
    <div style=" height: 48px; padding-top: 20px; overflow: hidden;">text</div>
    <div style=" height: 48px; padding-top: 20px; overflow: hidden;">text</div>
    <div style="height: 48px; padding-top: 20px; overflow: hidden;">text</div>
    <div style=" height: 48px; padding-top: 20px; overflow: hidden;">text</div>
</div>

任何人都可以让我知道我哪里出错了。我很欣赏目前所有内容都是内联的，但不确定这会影响到什么。

非常感谢。

Answer 1

你需要float:left div并给每个宽度的50％：

<div style="height: 340px; width:100%; white-space:nowrap;">
<div style="width: 49%;  width:50%;   height: 340px; float:left;background:#ddd">
    <!-- START ARTICLE POSITION 1 -->
    <div style="height: 170px;">text</div>
    <!-- START ARTICLE POSITION 2 -->
    <div style="height: 150px;">
        <div style="padding-top: 10px;">text</div>
    </div>
</div>
<div style=" background: #000; width: 49%;  width: 50%; float:left  ">
    <!-- START ARTICLE POSITION 1 -->
    <div style=" height: 48px; overflow: hidden;">text</div>
    <!-- START ARTICLE POSITION 2 -->
    <div style=" height: 48px; padding-top: 20px; overflow: hidden;">text</div>
    <div style=" height: 48px; padding-top: 20px; overflow: hidden;">text</div>
    <div style="height: 48px; padding-top: 20px; overflow: hidden;">text</div>
    <div style=" height: 48px; padding-top: 20px; overflow: hidden;">text</div>
</div>

Working demo

Answer 2

使用CSS float:left

以下是 Demo

Answer 3

你可以尝试

 <div style="height: 340px; width:100%; white-space:nowrap;">
            <div style="width: 49%;  width: calc(50% - 8px);   width: -moz-calc(50% - 8px);  width: -webkit-calc(50% - 8px); height: 340px; ">
                <!-- START ARTICLE POSITION 1 -->
                <div style="height: 170px;">text</div>
                <!-- START ARTICLE POSITION 2 -->
                <div style="height: 150px;">
                    <div style="padding-top: 10px;">text</div>
                </div>
            </div>
            <div style=" background: #eee; width: 49%;  width: calc(50% - 8px);   width: -moz-calc(50% - 8px);  width: -webkit-calc(50% - 8px); position:absoulout  left: calc(50%);position: absolute;top: 0;">
                <!-- START ARTICLE POSITION 1 -->
                <div style=" height: 48px; overflow: hidden;">text</div>
                <!-- START ARTICLE POSITION 2 -->
                <div style=" height: 48px; padding-top: 20px; overflow: hidden;">text</div>
                <div style=" height: 48px; padding-top: 20px; overflow: hidden;">text</div>
                <div style="height: 48px; padding-top: 20px; overflow: hidden;">text</div>
                <div style=" height: 48px; padding-top: 20px; overflow: hidden;">text</div>
            </div>

两个要素并排的问题

3 个答案:

Working demo