html - 当 div 占用多行时的边距

Question

我有这样的布局，div #a 的宽度始终为 50px:

#a { width: 50px; display: inline-block; }
#b { display: inline-block; margin-left: 50px; }
#c { margin-left: 50px; }

<div id="a">
10:30
</div>
<div id="b">
Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title
</div>
<div id="c">
Description Description Description Description Description Description Description Description Description Description Description Description Description Description
</div>

所需的渲染是(解决方案 A):

10:30    Title Title Title Title Title Title Title
         Title Title Title Title ...
         Description Description Description Description 
         Description Description ...

并且，对于网站的另一部分(解决方案 B):

10:30    Title Title Title Title Title Title Title
Title Title Title Title ...
Description Description Description Description 
Description Description ...

但不是

10:30    
         Title Title Title Title Title Title Title
         Title Title Title Title ...

如何解决这个布局问题？(尽可能使用最简单的 CSS 规则，即没有 flexbox 等)

Answer 1

解决方案A

#a { width: 50px; float:left; }
#b, #c { margin-left: 50px; }

<div id="a">
10:30
</div>
<div id="b">
Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title
</div>
<div id="c">
Description Description Description Description Description Description Description Description Description Description Description Description Description Description
</div>

---

方案B

#a { width: 50px; display: inline-block; }
#b { display: inline; }

<div id="a">
10:30
</div>
<div id="b">
Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title
</div>
<div id="c">
Description Description Description Description Description Description Description Description Description Description Description Description Description Description
</div>