Img и текстовые проблемы с полями

Question

Кажется, у меня всегда есть проблемы с созданием div, который содержит значок / img слева с заголовком и подзаголовком справа.

Может кто-нибудь дать мне знать, если есть более простой способ сделать это и указать мне учебник. Кроме того, по какой-то причине я не могу заставить класс "li-box" брать маржу.

Спасибо! http://jsfiddle.net/pLnydmw0/1/

<ul class="map-uk-tooltip">
    <li class="li-box">
        <img class="map-uk-tooltip-img" src="http://yeabruh.com/wp-content/uploads/2015/01/icon-uae-100MW.png" />
        <div class="box-for-text">
            <div class="map-uk-tooltip-tilte">DEWA Phase 2 Solar PV</div>
            <div class="map-uk-tooltip-client">SunEdison</div>
        </div>
    </li>
    <li class="li-box">
        <img class="map-uk-tooltip-img" src="http://yeabruh.com/wp-content/uploads/2015/01/icon-uae-100MW.png" />
        <div class="box-for-text">
            <div class="map-uk-tooltip-tilte">DEWA Phase 2 Solar PV</div>
            <div class="map-uk-tooltip-client">SunEdison</div>
        </div>
    </li>
    <li class="li-box">
        <img class="map-uk-tooltip-img" src="http://yeabruh.com/wp-content/uploads/2015/01/icon-uae-100MW.png" />
        <div class="box-for-text">
            <div class="map-uk-tooltip-tilte">DEWA Phase 2 Solar PV</div>
            <div class="map-uk-tooltip-client">SunEdison</div>
        </div>
    </li>
</ul>

Answer 1

Хорошо, это должно сработать для вас.

Я обнаружил пару несоответствий:

1) В вашей разметке (выше) у вас есть classes (например. <ul class="map-uk-tooltip">), но в вашей скрипке у вас есть id s (например, <ul id="map-uk-tooltip">) - id Они полезны для javascript, но когда дело касается вложенных элементов и специфики CSS, работать с вложенными классами гораздо проще. Итак, я пошел с вашей разметкой выше (не вашей разметкой в ​​скрипке).

2) В вашей разметке выше у вас есть: <div class="map-uk-tooltip-tilte">, В вашей разметке скрипки у вас есть: id="map-uk-tooltip-tilte", В вашем скрипте CSS у вас есть: #map-uk-tooltip-title

Я уверен, что мне не нужно говорить это, но... проверьте свою разметку и стили на наличие опечаток!

Что-то еще...

3) Когда вы хотите возобновить нормальный поток после объявления float:, вам нужно очистить ((либо clear:left;, clear:right; или же clear:both;). Если вы этого не сделаете clear: нормальный поток документа не возобновится, и различные последующие элементы будут продолжать размещаться вокруг плавающего элемента.

4) Когда вы объявляете float: довольно хорошая практика всегда объявлять ширину плавающего элемента.

Все, что сказал, попробуйте это:

.map-uk-tooltip {
    list-style-type: none;
}

.map-uk-tooltip li {
    clear:left;
    height: 200px;
}

.map-uk-tooltip-img, .box-for-text {
    display: inline-block;
    float:left;
    width: 160px;
    margin-right: 20px;
}

<ul class="map-uk-tooltip">
    <li class="li-box">
        <img class="map-uk-tooltip-img" src="http://yeabruh.com/wp-content/uploads/2015/01/icon-uae-100MW.png" />
        <div class="box-for-text">
            <div class="map-uk-tooltip-title">DEWA Phase 2 Solar PV</div>
            <div class="map-uk-tooltip-client">SunEdison</div>
        </div>
    </li>
    <li class="li-box">
        <img class="map-uk-tooltip-img" src="http://yeabruh.com/wp-content/uploads/2015/01/icon-uae-100MW.png" />
        <div class="box-for-text">
            <div class="map-uk-tooltip-title">DEWA Phase 2 Solar PV</div>
            <div class="map-uk-tooltip-client">SunEdison</div>
        </div>
    </li>
    <li class="li-box">
        <img class="map-uk-tooltip-img" src="http://yeabruh.com/wp-content/uploads/2015/01/icon-uae-100MW.png" />
        <div class="box-for-text">
            <div class="map-uk-tooltip-title">DEWA Phase 2 Solar PV</div>
            <div class="map-uk-tooltip-client">SunEdison</div>
        </div>
    </li>
</ul>