Question

我有两个div，我在内容容器div中彼此相邻放置，其中一个包含视频和一些描述文本，另一个包含随机文本的滚动条。但是，正如您在此图片中看到的那样（http://gyazo.com/1a5b3e559c1f4294b8c05b6c74fc677d），内容容器不包含我想要的描述（因此使得舍入的div内容容器不会覆盖它）。我试图解决它，但我运气不好。以下是我的代码细分：

我将首先展示CSS：

#content-container3
{
margin-top: 10px;
width: 900px;
repeat-y 100% 0;
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
border: 1px solid #575757;
background: #DBDBDB;
}

#content
{
margin-top: 10px;
padding: 5px;
padding-top: 0px;
float: left;
}

#scroll {
height: 358px;
border: 1px solid #999;
width: 239px;
overflow: auto;
margin-top: 10px;
padding: 2px;
}

现在转到HTML

    <div id="content-container3">

      <div id="content">

<video id="player_a" class="projekktor" poster="intro.png" title="1v1LB Player" style="background: black;"     width="640" height="360" controls>
   <source src="unorthxdox.mp4" type="video/mp4" />

</video>                <h2 style="padding-top: 10px;">
                Unorthxdox vs CaLeB XII</h2>
<a href="unorthxdox.1v1lb.com">Player's Profile</a> | <a href="oriixa.1v1lb.com">Editor's Profile</a> <br />
<a href="1v1lb.com/vid=220/">Click here to view comment(s) on the game.</a>
</div>
<div id="scroll">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor       incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea     commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla     pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est     laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et     dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea     commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla     pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est     laborum.</p>
</div>
        </div>

从我发布的代码中，它应该正常工作。我已经尝试搞乱浮动和宽度以及其他诸如此类的东西，我一直无法找到解决方案。我不是最好的HTML / CSS，但我希望能够至少解决这个问题。

Answer 1

将float: left;添加到所有三个css规则中会有所帮助。

（但不要忘记在之后清除它。无论如何，我会冒险并建议你不要使用花车。你的标记，你可以通过删除float: left并添加display: inline-block;来实现它。到#content和#scroll。）

同一行上的2个div不会一直延伸到包含文本

1 个答案: