在图像周围环绕文字

Question

I'm having some trouble wrapping text on a web application I'm designing for a client. Below you can see where I am having trouble:

So ideally I would like this text to wrap underneath the text above it, in a uniform manner. Not underneath the image. Below you can see the HTML code I am using for this:

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

And all of the CSS is below:

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

You can also check out a working example of this at: http://jsfiddle.net/Mjs2u/

Thank you very much for any and all help. I really appreciate it! Let me know if you guys need me to elaborate on anything else or you need/want more code.

Answer 1

Your HTML code is ill-formed. Forget ol , ul listing if there isn't a list. ol should only have li as its children elements. <ol><div><li></li></div></ol> is bad practice.

Basically, if you want to put something under sth, you can group them into a div or other block element. Do not use float layout for the div or you will have similar layout as your example if the previous element is shorter than your div.

You can use some flexible layout patterns. Use a wrapper div with a wide padding-left , where the image and radio button will be placed. And put the label and text in the main body of the div. Something like 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>

For your specific code sample, I made some refactoring based on the content you've given, and you can check jsFiddle to see if it's what you want.

Hope it helps.

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/

hope it will be helpfull

Answer 3

try this:

add span with class name in the text you want to move then position:relative;

below i add <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;
}

hope this help you