Question

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

Text wrapping issue

理想情况下，我希望这个文本以统一的方式包装在它上面的文本下面。不在图像下方。您可以在下面看到我正在使用的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都在下面：

/* 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%; }

您还可以在http://jsfiddle.net/Mjs2u/

查看相关的工作示例

非常感谢您的帮助。对此，我真的非常感激！如果你们需要我详细说明其他内容或者你需要/想要更多代码，请告诉我。

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

<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/

希望它会有所帮助

Answer 3

试试这个：

在您要移动的文字中添加span class名称，然后position:relative;

下面我添加<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;
}

希望这能帮到你

在图像周围环绕文字

3 个答案: