Question

我似乎总是遇到创建div的问题，左边包含一个图标/ img，右边是标题和副标题。

有人可以告诉我是否有更简单的方法可以做到这一点，并指出我的教程。也出于某种原因，我无法获得＆＃34; li-box＆＃34;上课以保证金。

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

边缘的Img和文本问题

1 个答案: