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/

1 列目のスペースを 2 列目のテキストで埋めることは可能ですか?

PS: 固定幅がないと、column2 のフロートが答えのように見えますが、純粋な css ソリューションまたは mi が間違っているというよりもハックのようです。

4

1 に答える 1

0

フローティング フォーム column2 を削除する #column2 { width: 570px; padding-left: 10px;}

于 2012-11-23T05:56:15.930 に答える