html - 在图像周围环绕文本

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都在下面：

/* 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 短，您将拥有与示例类似的布局。

您可以使用一些灵活的布局模式。使用带有 wide 的包装器 div padding-left，其中将放置图像和单选按钮。并将标签和文本放在div的主体中。像这样的东西：

<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添加名称classposition: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;
}

希望这对你有帮助