Question

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

示例： What I'm trying to create

所以我现在拥有它的方式如果文本不必下拉到新行，它就能完美地运行。

工作示例： It works when my title and description are short

然而，如果其中一个太长，一切都搞砸了，混乱的例子： It messed up if my title is too long

我设置了一个JS小提琴，让你们更容易。但是请记住我正在使用bootstrap进行设计，因此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/

谢谢

Answer 1

没有width:fixed之类的东西。您需要确保两个内容项的宽度加起来为父级的宽度。

Answer 2

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

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

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

如何修复HTML显示错误（我的文本意外丢失）

2 个答案: