2

鉴于此标记

CSS 

#wrapper {
    width: 900px;
}
#column1 {
    width: 320px;
    float: left;
}
#column2 {
    width: 570px;
    float: left;
    padding-left: 10px;
}
#social {
    text-align: center
}
​

HTML 

<div id="wrapper">
    <div id="column1">
        <div id="image">
            <a href="http://stackoverflow.com">
                <img width="320" src="http://appharbor.com/assets/images/stackoverflow-logo.png">
            </a>
        </div>
        <div id="social">
            Some Social Plugins/Buttons Whatever
        </div>
    </div>
    <div id="column2">
        <div>
            SOME REALLY LONG CONTENT WHICH IS USER-GENERATED (Can't be styled or this structure of divs and br be expected)
        </div>
        <br />
        <div>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac ante ac dolor interdum tristique vitae sit amet erat. Quisque auctor sagittis augue, vitae eleifend nibh egestas quis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris condimentum varius orci, ac accumsan mauris viverra nec. Nunc ullamcorper dapibus velit, ac vehicula turpis placerat quis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
        </div>
        <br />
        <div>
           Vivamus quis sem lectus. Phasellus lobortis semper nulla, ut imperdiet neque aliquam at. In tincidunt, mauris quis condimentum tempor, tellus magna mollis magna, a laoreet purus metus id tellus. Proin sagittis, sapien a tristique consequat, tellus neque feugiat massa, vel vulputate ligula lectus nec enim. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
        </div>
        <br />
        <div>
            Suspendisse dapibus diam eu felis convallis sed iaculis lorem aliquam. Duis sit amet metus a lectus commodo sodales vel a lacus. Praesent auctor facilisis ligula vitae convallis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam mi leo, ultrices vitae consequat at, luctus in arcu. In tincidunt pellentesque ornare. Sed laoreet porta ante, at euismod ipsum volutpat facilisis. Donec at augue iaculis ligula interdum consequat vitae quis turpis. Donec pulvinar velit nec arcu eleifend faucibus. Praesent placerat magna eget ipsum iaculis nec condimentum nibh egestas. Donec massa tellus, porttitor vitae posuere sed, dapibus quis sapien. Sed elit est, dapibus sit amet pulvinar et, volutpat non quam. Aenean eget est tellus. Mauris at tincidunt dui.
        </div>
        <br />
        <div>
            SOME REALLY LONG CONTENT WHICH IS USER-GENERATED (Can't be styled or this structure of divs and br be expected)
        </div>
    </div>
</div>

还托管在：http: //jsfiddle.net/bbQPE/1/

是否可以用第二列中的文本填充第一列中的空间？

PS：没有固定宽度，column2 的浮点数似乎是答案，但似乎比纯 css 解决方案或 mi 错误更多。

4

1 回答 1

0

删除浮动表单 column2 #column2 { width: 570px; padding-left: 10px;}

于 2012-11-23T05:56:15.930 回答