将我的盒子固定在一个盒子里面

时间:2013-04-25 17:01:44

标签: html html5

我目前在一个盒子里面有一个盒子,但它不是以文本为中心。 我想将文本框放在文本周围,以便框不会在空白区域上运行:

http://jsfiddle.net/infoed/nvVBU/(css在jdfiddle中):

<DOCTYPE! html>
<html>
<head>
    <title>fumblr.</title>
    <link rel="stylesheet" href="styles.css" />
    <link rel="stylesheet" href="bootstrap.min.css" />
</head>
<body>
    <div id="navbar">
        <ul>
             <li><img src="img/toplogo.png"></li>
             <li> <a> Fumblr </a> </li>
        </ul>
    </div>

<div id="content">
    <div class="box">
            <img src="img/heart.svg" height="18" width="18" />
            <div class="userid">DogBountyHunter27</div>
            <div class="headline">Been 10 Days off bread. Want to die</div>
            <p>Is there any doubt that cats are awesome? We love cats, and being Mashable and all, we know a thing or two about them. But is it even possible to put our feelings about cats into infographic form? You be the judge. Undaunted by such a Herculean task...</p>
        </div>

        <div class="box">
            <img src="img/heart.svg" height="18" width="18"  />
            <div class="userid">Vader2307</div>
            <div class="headline">Hilarious Link of Bill Gates Jumping over a chair</div>
            <p>Type an address into your phone, and up will pop a step-by-step route from where you are to where you want to be. This is, in its way, magic. But it's magic that has, at this point, been rubbed and polished into a simple fact of life. The ease with...  </p>
        </div>

        <div class="box">
            <img src="img/heart.svg" height="18" width="18" />
            <div class="userid">ShaqAttack</div>
            <div class="headline">Is Insanity Wolf bad for the meme community?</div>
            <p>Is there any doubt that cats are awesome? We love cats, and being Mashable and all, we know a thing or two about them. But is it even possible to put our feelings about cats into infographic form? You be the judge. Undaunted by such a Herculean task...</p>
        </div>

        <div class="box">
            <img src="img/heart.svg" height="18" width="18" />
            <div class="userid">Jimmy Two Times</div>
            <div class="headline">Fax machines making a comeback in Williamsburg</div>
            <p>Is there any doubt that cats are awesome? We love cats, and being Mashable and all, we know a thing or two about them. But is it even possible to put our feelings about cats into infographic form? You be the judge. Undaunted by such a Herculean task...</p>
        </div>

        <div class="box">
            <img src="img/heart.svg" height="18" width="18" />
            <div class="userid">SmoothieFanatic</div>
            <div class="headline">Fifth Grader Expelled for bringing Siracha to school</div>
            <p>Is there any doubt that cats are awesome? We love cats, and being Mashable and all, we know a thing or two about them. But is it even possible to put our feelings about cats into infographic form? You be the judge. Undaunted by such a Herculean task...</p>
        </div>     
    </div>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

我假设你在谈论“标题”div。如果是这样,只需将div更改为span。这将包含最后没有多余空格的单词。

<div class="headline">HEADLINE HERE</div>

更改为:

<span class="headline">HEADLINE HERE</span>

希望有所帮助!