0

white-space:nowrap を使用したスパン内に、white-space:normal を使用した SPAN のリストを配置したいと考えています。上記のコードをFirefoxで試してみるとうまくいきます。クロムで試してみるとうまくいきません。それを修正する方法は？

<div style="overflow: auto; width: 100%; white-space: nowrap;" class="well">

            <span style="margin: 10px; position: relative;">
                <img data-src="holder.js/150x150" class="img-rounded img-polaroid" alt="150x150" style="width: 150px; height: 150px;">
                <a href="/promo-web/promocao/13">
                    <span style="position: absolute; left: 5px;white-space:normal">alienígenas de são cristovão e o melhor do sorvete</span>
                </a>


            </span>

            <span style="margin: 10px; position: relative;">
                <img data-src="holder.js/150x150" class="img-rounded img-polaroid" alt="150x150" style="width: 150px; height: 150px;">
                <a href="/promo-web/promocao/13">
                    <span style="position: absolute; left: 5px;white-space:normal">alienígenas de são cristovão e o melhor do sorvete</span>
                </a>


            </span>

            <span style="margin: 10px; position: relative;">
                <img data-src="holder.js/150x150" class="img-rounded img-polaroid" alt="150x150" style="width: 150px; height: 150px;">
                <a href="/promo-web/promocao/13">
                    <span style="position: absolute; left: 5px;white-space:normal">alienígenas de são cristovão e o melhor do sorvete</span>
                </a>


            </span>
...
4

1 に答える 1

0

html と css に関するいくつかの概念が欠けています。

  • css を html から分離します。
  • コンテナーの場合は、 を使用しますdiv。spanインライン要素のスタイルを設定するためだけに使用します。
  • 多くの DOM 要素を作成する際に悪用しないでください。

私の解決策を参照してください（代わりに&もdiv使用できます）。また、可能であれば、タグを作成して絶対配置を適用する代わりに、画像を background-imageとして表示します。ulliaimg

http://jsfiddle.net/jvHZq/

HTML:

<div class="well">
    <div>
        <img data-src="holder.js/150x150" class="img-rounded img-polaroid" />
        <a href="/promo-web/promocao/13">alienígenas de são cristovão e o melhor do sorvete</a>
    </div>
    <div>
        <img data-src="holder.js/150x150" class="img-rounded img-polaroid" />
        <a href="/promo-web/promocao/13">alienígenas de são cristovão e o melhor do sorvete</a>
    </div>
    <div>
        <img data-src="holder.js/150x150" class="img-rounded img-polaroid" />
        <a href="/promo-web/promocao/13">alienígenas de são cristovão e o melhor do sorvete</a>
    </div>
</div>

CSS:

.well {
    overflow: auto;
    width: 100%;
    white-space: nowrap;   
}
.well > div {
    float: left;
    position: relative;
    white-space:normal;
    width: 33%;
}
img {
    width: 150px; height: 150px;   
}
a {
    position: absolute;
    top: 0;
    left: 5px;
}
于 2013-08-30T20:23:12.817 に答える