Html 如何将多个div并排放置？_Html_Css_Position_Css Float

Html 如何将多个div并排放置？

html css

Html 如何将多个div并排放置？,html,css,position,css-float,Html,Css,Position,Css Float,我有几个div，其中包含一个浮动图像和一个无序列表。我希望这两个位置并排在页面下方问题是，当divs沿着页面向下移动时，整个过程都会崩溃。右边的图像开始越来越低，列表项越来越高。这就是我所做的 .imageleft { float: left; margin-left: 0; margin-top: 0; } .container-right { display:inline; padding-bottom: 10px; width: 500

我有几个

div

，其中包含一个浮动图像和一个无序列表。我希望这两个位置并排在页面下方

问题是，当

div

s沿着页面向下移动时，整个过程都会崩溃。右边的图像开始越来越低，列表项越来越高。这就是我所做的

    .imageleft  {
    float: left;
    margin-left: 0;
    margin-top: 0;
}

.container-right {
display:inline;
    padding-bottom: 10px;
    width: 500px;

}

.container-left {

    float:left;
    padding-bottom: 10px;
    width: 500px;

}


    <div class="inline">
        <div class="container-left">
            <img alt="Image info" class="imageleft" src="someimage.png" />
            <h3>
                Title</h3>
            <ul>
                Sub title:
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
            </ul>
        </div>
        <div class="container-right">
            <img alt="Blah blah" class="imageleft" src="/another-image.png" />
            <h3>
                Title</h3>
            <ul>
                Sub heading
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
            </ul>
        </div>
    </div>

.imageleft{
浮动：左；
左边距：0；
边际上限：0；
}
.货柜权{
显示：内联；
垫底：10px；
宽度：500px；
}
1.集装箱剩余{
浮动：左；
垫底：10px；
宽度：500px；
}
标题

副标题：

列表项

列表项

列表项

列表项

列表项

列表项

标题

副标题

列表项

列表项

列表项

列表项

列表项

列表项

我尝试在2

div

s周围添加一个

div

，但似乎没有任何帮助。我如何防止这种不受欢迎的行为

谢谢你的提示

您的意思是像这样

您实际上只需要.imageleft类。应用于两个div，就可以设置

下面是代码（我添加了一个边框来勾勒div）：


.左{
浮动：左；
左边距：0；
边际上限：0；
边框：1px实心#000；
}
无标题文件
标题

副标题：

列表项

列表项

列表项

列表项

列表项

列表项

标题

副标题

列表项

列表项

列表项

列表项

列表项

列表项

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
.imageleft  {
    float: left;
    margin-left: 0;
    margin-top: 0;
    border:1px solid #000;
}
</style>
<title>Untitled Document</title>
</head>
<div class="imageleft">
<img alt="Image info" class="imageleft" src="someimage.png" />
            <h3>
                Title</h3>
            <ul>
                Sub title:
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
            </ul>

</div>
<div class="imageleft">
<img alt="Blah blah" class="imageleft" src="/another-image.png" />
            <h3>
                Title</h3>
            <ul>
                Sub heading
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
            </ul>

</div>
<body>
</body>
</html>