0

所以我想做的是为我自己的 HTML 小网站创建一个模型。所以直到现在一切都很顺利。我想要做的是显示一个图像，然后在它旁边显示一个标题和描述，有点像 youtube 所做的。

例子：我正在尝试创建的内容

因此，如果文本不必下降到新行，那么我现在拥有它的方式就可以完美地工作。

它的工作示例：当我的标题和描述很短时它可以工作

但是，如果其中一个太长，一切都会搞砸，搞砸的例子：如果我的标题太长，那就搞砸了

我设置了一个 JS fiddle 让你们更容易。但是请记住，我正在使用引导程序进行设计，因此 CSS 如此长的原因是因为它包含完整的引导程序，但是只有前 57 行是我自定义编写的 css。无论如何，如果有人可以帮助我，那么当我的标题或描述太长时，它会像 youtube 一样放到下一行。

我的 HTML

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="css/custom.css">
        <title>Comments</title> 
    </head>

    <body>

        <div class="logo">
            <img height="70" width="200" src="/img/logo.png">
        </div>

        <div class="container">

            <div class="leftBar">
                <div class="well">
                    <div class="title">
                        <h3>Mini Title</h3>
                    </div>

                    <hr/>

                    <div class="contentLink">
                        <div class="smallContentImage">
                            <img src="http://i.imgur.com/zesaMhG.gif">
                        </div>

                        <div class="smallContentText">
                            <h5>Title Goes Here</h5>

                            <em>
                                Other Informati
                            </em>
                        </div>
                    </div>

                </div>
            </div>

            <div class="rightBox">
                <div class="well">
                    <div class="title">
                        <h1>Title For Content</h1>
                    </div>
                    <p> CONTENT CONTENT CONTENT </p>
                </div>
            </div>

        </div>

    </body>



</html>

我的 CSS

body {

    background #FAFAFA;
}


.title {

    text-align: center;
}

.logo {

    margin-right: auto;
    margin-left: 2%;
    padding-top: 2%;
}

.leftBar
{
    margin-right: auto;
    float: left;
    width: 30%;
    overflow: hidden;
}

.rightBox 
{
    margin-left: 0;
    float: right;
    width: 70%;
}

.contentLink
{
    padding-left: 1%;
    padding-right: 1%;
    width: auto;
    height: auto;
}

.smallContentImage {

    width: 100px;
    height: 100px;
    margin-left: 0;
    margin-right: auto;
    float:left;
}

.smallContentText {
    float: right;
    width: auto;
    margin-left: auto;
    margin-right: 0;
    width: fixed;
}

JS 小提琴：http: //jsfiddle.net/BjSv8/

谢谢

4

2 回答 2

1

没有这样的事情width:fixed。您需要确保两个内容项的宽度加起来等于父项的宽度。

于 2013-03-06T04:46:21.037 回答
1

你有什么理由使用 em 而不是 div。如果您可以使用 'div' 而不是 'em' 并定义 width ，那么您的问题就可以解决。

<div  style="word-wrap:break-word;border:1px solid red; width:100px">
Other Information goes here
</div>

看到这个小提琴：http: //jsfiddle.net/BjSv8/1/

于 2013-03-06T04:47:51.570 回答