css - Twitter Bootstrap HTML/CSS 中的 Span 放置

Question

我在这里遇到了一个小的 HTML/CSS Bootstrap 问题。基本上我有一个 span4，左边有一张图片，然后是一个 span8，右边有一段描述图片的内容。

<div class="container">
    <div class="cent text-center">
    <div class="row box" style="border:1px solid #CCC; padding:15px 0px 15px 0px;">
     <div class="span4" style="height:200px;"><div class="profile pro"><img src="http://icons.iconarchive.com/icons/deleket/sleek-xp-software/256/Yahoo-Messenger-icon.png" /></div><!----profile END---></div><!---span4--->
   <div class="span8 section">
   <h3 align="center">Title</h3>
   <div class="team">
   <p class="team">this is the description about the picture this is the description about the picture this is the description about the picture this is the description about the picture.</p>

   </div><!---team END--->
   </div><!---span8--->
    </div><!---Row END--->
   </div><!----cent END--->
   </div><!--container END-->



.cent{
    text-align:center;
    margin:auto;
    width:auto;
    }

    .section {
    padding-top:20px;
    margin:auto;
    }

.team {
    text-align:center;
    margin:auto;
    max-width:600px;!important
    padding-left:20px;!important
    padding-right:20px;!important
    }

    .profile {
        max-width:200px;
        text-align:center;
        margin:auto;
        padding-top:10px;
        }

        .pro {
            padding-left:100px;!important
            }

            .box {
                background:#FFF;
                border:1px solid #CCC; 
                box-shadow: 0px 1px 1px #CCC; 
                padding: 0px 20px 20px 0px;
                -webkit-border-radius: 7px;
                -moz-border-radius: 7px;
                border-radius: 7px;
                min-height:220px;
                }

现在我唯一想做的就是反转代码，使图片现在在左边，描述在右边，但当我这样做时，span4 似乎没有放在 的一侧span8 而不是在它下面。

<div class="container">
    <div class="cent text-center">
    <div class="row box" style="border:1px solid #CCC; padding:15px 0px 15px 0px;">
   <div class="span8 section">
   <h3 align="center">Title</h3>
   <div class="team">
   <p class="team">this is the description about the picture this is the description about the picture this is the description about the picture this is the description about the picture.</p>
   <div class="span4" style="height:200px;"><div class="profile pro"><img src="http://icons.iconarchive.com/icons/deleket/sleek-xp-software/256/Yahoo-Messenger-icon.png" /></div><!----profile END---></div><!---span4--->
   </div><!---team END--->
   </div><!---span8--->
    </div><!---Row END--->
   </div><!----cent END--->
   </div><!--container END-->

Answer 1

里面有很多不必要的代码。也许这不是您要找的东西，但我并没有试图找出您提供的代码，而是重新开始，并提供了一种更简洁的方法来完成您想要完成的事情。

您应该在询问已经存在的问题时修改您的问题。在顶部你说:“基本上我有一个 span4，左边有一张图片，然后是一个 span8，右边有一个描述图片的段落。”但是在下面你说“现在我唯一想做的就是反转代码，这样图片现在就在左边，描述就在仪式上，但是当我这样做的时候，span4 似乎没有放在一边span8 而不是在它下面。”

关键是使用“ float ”属性。

这是 html:

<div class="container">
    <div class="span4">
        <img src="http://icons.iconarchive.com/icons/deleket/sleek-xp-software/256/Yahoo-Messenger-icon.png" />
    </div>
    <div class="span8">
        <div class="span8-text">
             <h3>Title</h3>

            <p>this is the description about the picture this is the description about the picture this is the description about the picture this is the description about the picture.</p>
        </div>
    </div>
</div>

和CSS:

.container {
    position: relative;
    clear: both;
    text-align: center;
}
.span4 {
    float: right;
    width: 200px;
}
.span8 {
    position: relative;
    float: left;
    width: 350px;
}

这是 jsfiddle:http://jsfiddle.net/h69Bh/