Question

我希望将span标记向左浮动，并在其旁边浮动<section>。但<section>位于跨度之下。

我认为它与设置元素的宽度有关，但我希望它具有响应性和灵活性。

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <h3 class="highlight-sub"><em>Start using your card today</em></h3>
        </div>
        <div class="col-md-8">
            <div class="col-md-4">
               <span class="step">1</span>
               <section>
                    <h4 class="highlight-prim">Complete Form</h4>
                    <p class="highlight-sub">Simply fill in our online form and your account will created.</p>
               </section>
            </div>
            <div class="col-md-4">
                <span class="step">2</span>
                <section>
                    <h4 class="highlight-prim">Receive by Post</h4>
                    <p class="highlight-sub">You will be sent your new card in post.</p>
                </section>              
            </div>
            <div class="col-md-4">
                <span class="step">3</span>
                <section>
                    <h4 class="highlight-prim">Start Enjoying</h4>
                    <p class="highlight-sub">Present your new card to any of our partners for al the benifits.</p>
                </section>      
            </div>
         </div>
      </div>
  </div>

#mid-content span.step {
  border: 2px solid #A99269;
  border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
  color: #A99269;
  display: inline-block;
  font-weight: 300;
  line-height: 1.6em;
  margin-right: 5px;
  text-align: center;
  width: 1.6em;
  font-size: 32px;
  float: left
}

#mid-content section {
    display: inline-block;
    float:left
}

Answer 1

是的，可能section的内容几乎是行的100％，它会进入第二行。您可以将跨度放在

部分中

Answer 2

向左浮动 .step元素，并向section提供一个等于.step总宽度的左边距{1}}（总计我的意思是包括边界.. ）

演示 http://jsfiddle.net/sqD6Q/
（有任意保证金，因为我不知道你的当前风格来计算保证金.. ）

css float左边两个元素

2 个答案: