为什么我不能让我的两个 div 并排坐 [关闭]答案

【问题标题】：why can't I get my two divs to sit side by side [closed]为什么我不能让我的两个 div 并排坐 [关闭]
【发布时间】：2015-05-13 19:07:39
【问题描述】：

我希望能够并排放置两个 div，右侧 div 带有文本，左侧 div 带有图片，但我无法让它工作，我试图让它们左右浮动但没有用.

这是我的代码

<div id="container">
  <div id ="pic">

    <img src="IMG_4847.jpg"alt="me"/>
    

</div>

<div id ="about">
  

    <h1>About Me</h1>

<p>Hello my name is Rebekah, I’m 23 and this is my blog </p>

</div>

</div>

#about
{
	
	padding-left: 500px;
	padding-right: 100px;
	padding-top: 60px;

	
	
}

#pic
{
	padding-left: 110px;
	padding-top: 60px;

		
	
}

【问题讨论】：

因为你还没有设置任何 CSS 规则来并排显示这些 div！
divs 默认有块显示，防止任何东西放在 div 旁边。因此，除非您更改这一点，否则您将永远不会看到并排的两个 div。
这是不正确的about。应该是#about
像什么？你的意思是宽度还是位置？我都试过了，但都没有用
你上面的DOM树也是无效的。它不平衡。

标签： html css

【解决方案1】：

你需要float元素：

#pic 应该向左浮动

#pic {
    float:left;
}

#about 应该向右浮动

#about {
    float:right;
}

http://jsfiddle.net/x19wwk9n/

您还需要在 CSS 文件中的 about 标记上添加 #。

【讨论】：

@becky - 它来自我提供的小提琴。
@becky - 您是否在 CSS 文件中指定了 #about 而不是 about？
不，我看了一下，它没有
@DarrenDavies 如果您都向左浮动，它会起作用。
@becky 请注意，div 宽度的总和必须等于或小于要内联显示的屏幕宽度

【解决方案2】：

您需要为您的 CSS 提供浮动指令。尝试给这两个部分：

float: right;

【讨论】：

试过了，还是不行

【解决方案3】：

试试这个解决方案：

#about
{
    padding-left: 500px;
    padding-right: 100px;
    padding-top: 60px;
    display: inline-block;
}

#pic
{
    padding-left: 110px;
    padding-top: 60px;
    display: inline-block;
}

【讨论】：

【解决方案4】：

为两个 div 赋予属性以这样的方式保持双向：

#about
{
    padding-top: 60px;
    float: left;
}

#pic
{
    padding-top: 60px;
    float: left;



}

在你的 html 中两个 div 之后：

    <div id="container">
  <div id ="pic">

    <img src="IMG_4847.jpg"alt="me"/>


</div>

<div id ="about">


    <h1>About Me</h1>

<p>Hello my name is Rebekah, I’m 23 and this is my blog </p>

</div>


<br style="clear:both;">

重置浮动属性并保持布局的其余部分如您所愿。注意我删除了一个不必要的结束标签

【讨论】：

很遗憾这不起作用
@becky 有效。您必须调整 div 的大小和填充。边距、内边距、边框和 div 大小（两者）的总和必须等于或小于屏幕大小。在任何其他情况下，第二个 div 将跳到下一行。我猜填充是你的测试来浮动它们所以最好将它们全部移除

【解决方案5】：

使用display: table

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

#container{ 
   display: table;
    width: 100%;
    height: 200px;
}
#pic,
#about{
    display: table-cell;
    vertical-align: middle;
    width: 50%;
    padding: 25px;
}
#pic{
    background: #f00;
}
#about{
    background: #00f;
}

<div id="container">
    <div id ="pic">
        <img src="IMG_4847.jpg"alt="me"/>
    </div>
    <div id ="about">
        <h1>About Me</h1>
        <p>Hello my name is Rebekah, I’m 23 and this is my blog </p>
    </div>
</div>

【讨论】：

【解决方案6】：

您可以使用float:left 并排显示 div。您还可以使用inline-block 和或float:left 和float:right 让它们并排显示（就像其他人提到的那样）。实际上有多种方法可以实现，每种方法都可能取决于您尝试使用的用例。

HTML：

<div></div>
<div></div>

CSS：

div {
    width:50%;
    border:1px solid;
    height:200px; 
    box-sizing:border-box;
    float:left;
}

注意： 我添加高度是因为没有内容。只是为了帮助您在视觉上更好地展示。而 box-sizing 是为了帮助 box 模型考虑边框。否则 1px 边框会导致第二个 div 包裹在第一个之下。

推荐：

也不要这样做..

<div id="pic"></div>
<div id="about"></div>

我会推荐这个..

<div class="column"></div>
<div class="column"></div>

然后类似..

.column {
        width:50%;
        border:1px solid;
        height:200px; 
        box-sizing:border-box;
        float:left;
    }

示例：

https://jsfiddle.net/4eocqjur/1/

【讨论】：