繁体   English   中英

在图像周围环绕文字

[英]Wrapping text around an image

我在为客户设计的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/

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

您的HTML代码格式不正确。 如果没有列表,请忘记olul列表。 ol应该只有li作为其子元素。 <ol><div><li></li></div></ol>是不好的做法。

基本上,如果你想把东西放在某个东西下,你可以将它们分组成div或其他块元素。 不要对div使用float布局,或者如果前一个元素比div短,则将具有与示例类似的布局。

您可以使用一些灵活的布局模式。 使用带有宽padding-left的包装器div,其中将放置图像和单选按钮。 并将标签和文本放在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以查看它是否是您想要的。

希望能帮助到你。

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

希望它会有所帮助

尝试这个:

在要移动的文本中添加带有class名的span然后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;
}

希望这能帮助你

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM