css - Twitter Bootstrap HTML/CSS中的跨度放置

我在这里遇到一个小的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-->

最佳答案

您那里有很多不必要的代码。也许这并不是您想要的，但是我没有尝试找出您提供的代码，而是从头开始，并提供了一种更干净的方式来完成您想完成的工作。

在询问已经存在的内容时，应修改您的问题。在顶部，您说：“基本上，我有一个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/