Question

我想并排展示两个部门。我尝试了一些可能的解决方案，但它们仍然重叠。提前谢谢。

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
    .sidebar
    {
        width:200px;
        background:yellow;
        color:orange;
        padding:50px;
    }
    .content
    {
        width:600px;
        background:silver;
        color:red;
        padding:50px;
    }
</style>
</head>
<body>
       <div class="sidebar">
        This is sidebar div
    </div>
    <div class="content">
        This is Content div
    </div>
</body>
</html>

Answer 1

使用float:left; Learn about CSS float Property

.sidebar
    {
        width:150px;
        background:yellow;
        color:orange;
        padding:50px;
		float:left;
    }
    .content
    {
        width:200px;
        background:silver;
        color:red;
        padding:50px;
		float:left;
    }

<div class="sidebar">
	This is sidebar div
</div>
<div class="content">
	This is Content div
</div>

Answer 2

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
    .sidebar
    {
        width:200px;
        background:yellow;
        color:orange;
        float:left;
        padding:50px;
    }
    .content
    {
        width:200px;
        background:silver;
        color:red;
        float:left;
        padding:50px;
    }
</style>
</head>
<body>
       <div class="sidebar">
        This is sidebar div
    </div>
    <div class="content">
        This is Content div
    </div>
</body>
</html>

Answer 3

我认为你的意思是只是在一行中显示两个div是正确的所以它只是简单的添加浮点数：左边的第一个div它将解决你的问题。

喜欢：

    .sidebar {
        width: 200px;
        background: yellow;
        color: orange;
        padding: 50px;
        float:left;
    }

Answer 4

<!DOCTYPE html>
<html>
<head>
   <title></title>
<style type="text/css">
    .sidebar
    {
        width:200px;
        background:yellow;
        color:orange;
        padding:50px;
        float:left;
    }
    .content
    {
        width:600px;
        background:silver;
        color:red;
        padding:50px;
        float:left;
        margin-left:10px;
    }
</style>
</head>
<body>
    <div class="sidebar">
        This is sidebar div
    </div>
    <div class="content">
        This is Content div
    </div>
</body>
</html>

Answer 5

刚刚将主要父母添加到div并使用了display：inline-flex to it。

＆＃13;

.main{
  display:inline-flex;
}   
.sidebar
    {
        width:200px;
        background:yellow;
        color:orange;
        padding:50px;
    }
    .content
    {
        width:600px;
        background:silver;
        color:red;
        padding:50px;
    }

＆＃13;

<div class="main">
<div class="sidebar">
        This is sidebar div
    </div>
    <div class="content">
        This is Content div
    </div>
</div>

＆＃13;

Answer 6

将float：left添加到两个div将解决问题。

css代码：

NSBrowser

html代码：

 .sidebar
    {
        width:200px;
        background:yellow;
        color:orange;
        padding:50px;
        float:left;
    }
    .content
    {
        width:600px;
        background:silver;
        color:red;
        padding:50px;
        float:left;
    }

如果您的某个div下降，那么您必须调整div的宽度。

Answer 7

将浮动：左侧应用于小部件

Answer 8

解决这个问题：

您应将此代码添加到.content和.sidebar

添加float:left ...

这应该有帮助

http://www.w3schools.com/cssref/pr_class_float.asp ..

很高兴为您提供帮助

Answer 9

由于div是block级元素，因此它将占据其直接父级的100％宽度。因此，如果不使用float - 一个非常有用的 CSS 属性，就不能以横向方式放置它们。

因此，在CSS中，您应该添加如下所示的属性，以获得所需的结果：

.sidebar {
     float: left;
}

观看演示here。

要获得有关 float 的更多信息，可以随时使用Google，因为它是知识的海洋。

Answer 10

使用CSS float Property

float: none|left|right|initial|inherit;

 .sidebar {
   width: 200px;
   background: yellow;
   color: orange;
   padding: 50px;
   float: left;
 }
 .content {
   width: 200px;
   background: silver;
   color: red;
   padding: 50px;
   float: left;
 }

<div class="sidebar">
  This is sidebar div
</div>
<div class="content">
  This is Content div
</div>

如何在html中一起显示两个div？

10 个答案: