1

使用 JqueryMobile 时如何对齐两张图片，使它们位于 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>

第二个问题是，在 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;

}

我愿意接受任何更好的解决方案，并感谢 Torsten！萨米人

于 2012-07-17T20:22:52.357 回答