围绕图像环绕文字

Question

我在为客户端设计的Web应用程序上缠绕文本时遇到了一些麻烦。下面你可以看到我有麻烦：

所以我非常希望这个文本来包装它上面的文字之下，以统一的方式。不在图像下面。下面你可以看到我使用这个HTML代码：

<ul> 
    <div class="grid"> 

     <div class="col-1"> 

      <li class="howDoPadding"> 

       <label for="id_delivery_0"> 

           <img src="{{ STATIC_URL }}rd/images/message_icon.png" class="byAppointment" /> 

         <input checked="checked" type="radio" id="id_delivery_0" value="chat" name="delivery" /> 

          Answer<div class="lightBlueText">Chat</div> By Appointment (Fastest) 


       </label> 

      </li><!-- .howDoPadding --> 

     </div><!-- .col-1 --> 


     <div class="col-1"> 

      <li> 

       <label for="id_delivery_2"> 

        <img src="{{ STATIC_URL }}rd/images/message_fly_right.png" class="mailASAP" /> 

        <input type="radio" id="id_delivery_2" value="email" name="delivery" /> 

        Answer<div class="lightBlueText">Mail</div> ASAP (Within 1-2 days) 

       </label> 

      </li> 

     </div><!-- .col-1 --> 

    </div><!-- .grid --> 

</ul> 

而且下面的所有CSS的是：http://jsfiddle.net/Mjs2u/

：

/* Form */ 
.col-1 li.howDoPadding { padding-bottom: 10px!important; } 

.byAppointment { margin: 0 0 -4px 10px;} 

.offlineForm .lightBlueText { 
    color: #80A9BD; 
    display: inline; 
} 

.mailASAP { margin: 0 0 -4px 18px; } 


/* Grid */ 
*, *:after, *:before { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 

.grid:after { 
    clear: both; 
    content: ""; 
    display: table; 
} 

/* Grid Gutters */ 
[class*='col-'] { 
    float: left; 
    padding-right: 20px; 
} 

[class*='col-']:last-of-type { padding-right: 0; } 

.col-1 { width: 100%; } 

您还可以检查出的这一个工作示例

非常感谢您的帮助。对此，我真的非常感激！让我知道如果你们需要我详细说明其他事情，或者你需要/想要更多的代码。

Answer 1

你的HTML代码是非法的形成。忘记ol，ul列表如果没有列表。 ol应该只有li作为它的子元素。 <ol><div><li></li></div></ol>是不好的做法。

基本上，如果你想放下某物，你可以将它们组合成一个div或其他块元素。不要将float布局用于div，或者如果上一个元素比您的div更短，您将使用与您的示例类似的布局。

您可以使用一些灵活的布局模式。使用一个宽度为padding-left的包装div，其中图像和单选按钮将被放置。并将标签和文本放在div的主体中。喜欢的东西this：

<div class="flexible-layout"> 
    <div class="left-content"> 
     Image 
    </div> 
    <div class="main-content"> 
     You text goes here<br /> 
     Second line goes here 
    </div> 
</div> 

<style type="text/css"> 
.flexible-layout { 
    padding-left: 80px; 
    position: relative; 
} 
.flexible-layout .left-content { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 80px; 
} 
</style> 

针对您的特殊代码示例，我做了一些重构根据您提供的内容，并且可以检查jsFiddle，看它是否是你想要的。

希望它有帮助。

Answer 2

试试这个：

与class名称要移动，然后position:relative;

下面我添加文本添加span<span class="text">

HTML：

<li class="howDoPadding"> 
    <label for="id_delivery_0"> 
    <img src="http://i.imgur.com/RVmh2rz.png" class="byAppointment" /> 
    <input checked="checked" type="radio" id="id_delivery_0" value="chat" name="delivery" />Answer 
    <div class="lightBlueText">Chat</div> <span class="text">By Appointment (Fastest)<span> 
    </label> 
</li> 

<li> 
    <label for="id_delivery_2"> 
    <img src="http://i.imgur.com/8J0SEVa.png" class="mailASAP" /> 
    <input type="radio" id="id_delivery_2" value="email" name="delivery" />Answer 
    <div class="lightBlueText">Mail</div> <span class="text">ASAP (Within 1-2 days)</span> 
    </label> 
</li> 

CSS：

.text { 
    position:relative; 
    left:15px; 
} 

希望这有助于你

Answer 3

<form class="offlineForm"> 
    <ul> 
    <li class="howDoPadding"> 
     <label for="id_delivery_0"> 
     <img src="http://i.imgur.com/RVmh2rz.png" class="byAppointment" /> 
     <input checked="checked" type="radio" id="id_delivery_0" value="chat" name="delivery" /> 
     <div class="label">Answer <span class="lightBlueText">Chat</span> By Appointment (Fastest)</div> 
     </label> 
    </li>  
    <li> 
     <label for="id_delivery_2"> 
     <img src="http://i.imgur.com/8J0SEVa.png" class="mailASAP" /> 
     <input type="radio" id="id_delivery_2" value="email" name="delivery" /> 
     <div class="label">Answer <span class="lightBlueText">Mail</span>ASAP (Within 1-2 days)</div> 
     </label> 
    </li> 
    </ul> 
</form> 



body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; } 

ul li { list-style: none; } 

* { margin: 0; padding: 0; } 

*, *:after, *:before { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } 

form.offlineForm { width: 200px; margin: 0 auto; padding: 30px; } 

label { padding-left: 25px; display: block; position: relative; } 

label img { position: absolute; left: -25px; } 

label .lightBlueText { color: #80A9BD; } 

label div.label { display: inline; } 

li.howDoPadding { padding-bottom: 20px; } 

http://jsfiddle.net/4faQk/

希望这将是有益的