Question

我在某些div的位置和布局方面遇到了麻烦。

我想要的布局： image here

我希望标题始终显示在完整和右侧。副标题应出现在左侧，但隐藏任何溢出，因此标题的长度始终是先例。

我有以下代码：

<html>
<head>
   <style type="text/css">
      .title {height: 25px; text-align:left; width: 300px; border:1px solid red;}
      .subtitle {height: 20px; overflow:hidden; float:left; border: 1px solid blue;}
    </style>
</head>

<body>
   <div class="title">
      Title number 1
      <div class="subtitle">This is subtitle that is longer with even more text</div>
   </div>
</body>
</html>

如果副标题太长，它会在下面徘徊。有什么想法吗？

Answer 1

嗨，它可能不是完美的解决方案，但它正在工作...... 这可是一个好的开始。

我使用绝对位置将主标题放在子标题上，并使用主标题div中的颜色bakground隐藏字幕文本。

<html>
<head>
   <style type="text/css">
.title {
    height: 25px; 
    width: 300px; 
    position: relative;
}
.maintitle
{
    height: 25px; 
    border:1px solid red;
    font-size: 21px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding-left: 10px; /* to give space to the left on the main title */
    background-color: #ffffff; /* to hide the text under it. */
}
.subtitle {
    height: 20px; 
    overflow:hidden; 
    border: 1px solid blue;
    max-width: 290px; /* to make sure the sub-title dont fall on two line */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

    </style>
</head>

<body>
   <div class="title">
        <div class="maintitle">
            Title number 1
        </div>  

        <div class="subtitle">
            This is subtitle that is longer with even more text
        </div>
   </div>
</body>
</html>

Answer 2

以下是一项似乎有效的尝试：http://jsfiddle.net/3nCuJ/（下面将详细说明）

具体来说，我将标题向右浮动，而不是向左浮动的字幕。这样可确保在副标题之上显示整个标题。然后为了正确制作字幕剪辑，我添加了一个内部div来包含字幕文本。

如果您希望字幕停在字边界处，请改为：http://jsfiddle.net/3nCuJ/1/

HTML：

<div class="outer">
  <div class="title">Title number 1</div>
  <div class="subtitle"><div class="subtitle_inner">This is subtitle that is longer with even more text</div></div>
</div>

CSS：

.outer {
    height: 25px;
    width: 300px;
}
.title {
    height: 23px;
    float: right;
    border:1px solid red;
}
.subtitle {
    height: 23px;
    overflow:hidden;
    border: 1px solid blue;
}
.subtitle_inner {
    width: 300px;
}

Answer 3

现在是使用text-overflow: ellipsis的好时机。

http://jsfiddle.net/thirtydot/sxeu9/

<强> HTML：

<div class="row">
    <div class="title">Title number 1</div>
    <div class="subtitle">This is subtitle that is longer with even more text</div>
</div>

<强> CSS：

.row {
    width: 200px;
    float: left;
    border: 1px dashed #444;
    padding: 3px;
}
.title {
    float: right;
    border: 1px solid #666;
}
.subtitle {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border: 1px solid #f0f;
}

如何组织此布局溢出？

3 个答案: