1

我有两个 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，但我希望至少能够解决这个问题。

4

1 回答 1

0

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

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

于 2013-10-06T02:12:53.043 回答