Question

我无法解决CSS布局问题，所以我想知道是否有人可以查看我的代码并建议我，如何修复它。

我想要做的是将div与长lorem ipsum文本堆栈与具有短文本的文本堆栈放在一起，因此两者之间不会有空白空间。我不知道inline-block是否可行。我试图谷歌一些布局教程，但没有找到任何有用的东西。

JSfiddle来说明我的想法。

我怎样才能达到理想的布局？（我想在不使用任何外部代码的情况下进行管理）

Answer 1

不确定这是否是您要找的。

我在jsfiddle中所做的是我将你的div分成两列。

左栏使用float：

.left-col {
    padding: 5px;
    float: left;
    width: 50%;
}

和右列使用overflow-x占用所有剩余空格：

.right-col {
    padding: 5px;
    overflow-x: hidden;
}

由于包装已经改变，因此还有其他css的调整。

编辑：如果您担心破坏移动视图，可以使用@media设置要执行的限制。例如：

@media (min-width: 600px) {
    .left-col {
        padding: 5px;
        float: left;
        width: 50%;
    }

    .right-col {
        padding: 5px;
        overflow-x: hidden;
    }
}

.left-col和.right-col不会在没有任何CSS的情况下破坏你的东西

Answer 2

我在这里使用了两列：

<强> HTML：

<div class="left">
// Left column content goes here.
</div>

<div class="right">
// Right column content goes here.
</div>

<强> CSS：

.left {
    width:40%;
    display:block;
    float:left;
    padding-right:5px;
}

.right {
    width:40%;
    display:block;
    float:left;
}

JSFiddle Demo

Answer 3

美好的一天，

我相信我可能会为您设置，就像您想要的那样。请以任何方式告诉我。

http://jsfiddle.net/n7XKY/6/

CSS：

.div1 {
float:left;
width:50%;
display: block;
background-color: red;
margin:0px;
overflow:auto;
}
.div2 {
float:left;
width:50%;
display: block;
background-color: red;
margin:0;
overflow:auto;
}
.div3 {
width:100%;
clear:both}
}

CSS：内联阻止不需要的布局结果

3 个答案: