1

JqueryMobile を使用しているときに 2 つの画像が div の中心にあり、両側から離れているように配置するにはどうすればよいですか? --p--p--

<div class="ui-grid-a" style="margin: 10px;"">
            <div class="ui-block-a" id="pic"   align="center">
                <img src="images/image1_100x100.jpg" data-theme="c" id="pictureId"/>
            </div>
            <div class="ui-block-b">
                <label>&nbsp</label>
            </div>
            <div class="ui-block-c" id="pic"   align="center">
                <img src="images/image2_100x100.jpg" data-theme="c" id="pictureId2"/>
            </div>
        </div>

<style>

  div#pic { color:red; border:4px solid grey; border-radius: 15px; width:130px; height:130px 
         text-align:center; background-color: white; margin: 0 auto;}
</style>

2番目の質問は、div間にギャップを作る正しい方法は何ですか? 今は空の div を使っていますが、もっと良いものがあるのではないでしょうか?

乾杯、サミ

4

2 に答える 2

0

JQM cssリンクの後にcssを挿入すると、いつでもそれにcssを追加してJQMのものを上書きできます。私はあなたのコードを取り、それを少し修正したので、それはあなたに出発点を与えるはずです. あなたまたはJQM cssのいずれかがそれを妨げているかどうかはわかりません。今は試すことができません。

私の場合の CSS は、すべての互換性のある css (接頭辞付きのプロパティ) のため、決して小さくはありません。ただし、ボックス レイアウトの利点は、コンテンツを 2 方向の中央に配置したり、並べ替えや整列を行うことができるという点で、はるかに柔軟であることです。

http://www.w3.org/TR/css3-flexbox/

これは単なる代替手段です。

http://dabblet.com/gist/3132163

于 2012-07-17T18:23:27.957 に答える
0

私はそれを働かせました。それほど洗練されたソリューションではないと思いますが、機能しています。

.pics {
  background-color: white;
  border-radius: 15px;
  border: 4px solid grey;
  height: 130px;
  padding: 0px;
  text-align: center;
  width: 130px !important;
}
.picLeft {
  float:left;
  margin-left: 10px !important;

}

.picRight {
  float:right;
  margin-right: 10px !important;

}

私はより良い解決策を受け入れており、トルステンに感謝します! サーミ語

于 2012-07-17T20:22:52.357 に答える