[英]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代码格式不正确。 如果没有列表,请忘记ol
, ul
列表。 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; }
希望它会有所帮助
尝试这个:
在要移动的文本中添加带有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.