Question

我遇到了tile div在地铁中的位置问题。这是为SharePoint所以我不能使用任何JavaScript只有css / html。问题在于左边的missig div。请帮忙

<style type='text/css'>
  body { margin:0; padding:0; }
.clear { clear:both; }
#wrapper { margin:0 auto; width:1400px; }
#header { width:990px; height:120px; background: #0E83CD ; margin:5px auto;}
#block1 { width:646px; height:389px; float:left; background: #64BB5D; margin:5px; }
#block2 { width:110px; height:150px; float:left; background: #EB6890 ; margin:5px; }
#block3 { width:323px; height:190px; float:left; margin:5px; }
#block4 { width:646px; height:190px; float:left; margin:5px; }
.color1 { background: #E7333F ; }
.color2 { background: #0AA444 ; }
.color3 { background: #F40D43 ; }
#footer { width:990px; height:120px; background: #3C6DF0 ; margin:5px auto;}
#header:hover,#block1:hover,#block2:hover,#block3:hover, #block4:hover { background:#888888; -moz-transform: scale(1.1) rotate(0deg) translateX(1px) translateY(1px) skewX(0deg) skewY(0deg);
}
</style>

<div id="wrapper"> 

      <div id="block4" class="color1"> </div><!--block-long-->
    <div id="block3" class="color3"></div><!--block-short-->
    <div id="block3" class="color3"></div><!--block-short-->

    <div class="clear"></div> 

             <div id="block3" class="color3"></div><!--block-short-->



    <div id="block1"></div><!--block-big-->


      <div id="block3" class="color3"></div><!--block-short-->
          <div id="block3" class="color3"></div><!--block-short-->

  <div class="clear"></div> 

        <div id="block4" class="color1"> </div><!--block-long-->

          <div id="block4" class="color2"> </div><!--block-long-->



    <div class="clear"></div>


</div><!--wrapper-->

Answer 1

看看这个fiddle，缺少一个块，更好地使用class而不是id，你需要将它应用于几个元素。我只需在下面添加类以获取缺失块，并将用于＃block3的边距替换为新类.block-3。请记住，每个id必须是唯一的，因此最好将所有样式从id移动到类

.block-x {
    margin: 204px 5px 5px -328px;
}

Answer 2

这是你的答案......我在你的代码中做了一些更正，例如＆＃34;在id＆＃34;我还插入了一个丢失的div。希望这是你想要的。

你的CSS

<style type='text/css'>
body { margin:0; padding:0; }
.clear { clear:both; }
#wrapper { margin:0 auto; width:1400px; }
#header { width:990px; height:120px; background: #0E83CD ; margin:5px auto;}
#block1 { width:646px; height:389px; float:left; background: #64BB5D; margin:5px; }
#block2 { width:110px; height:150px; float:left; background: #EB6890;margin:5px; }
.block3 { width:323px; height:190px; float:left; margin:5px; }
.block4 { width:646px; height:190px; float:left; margin:5px; }
.color1 { background: #E7333F ; }
.color2 { background: #0AA444 ; }
.color3 { background: #F40D43 ; }
#subdivholder{width:336px; float:left;display:inline-block;} <!--New inserted code-->
#footer { width:990px; height:120px; background: #3C6DF0 ; margin:5px auto;}
#header:hover,#block1:hover,#block2:hover,.block3:hover, .block4:hover { background:#888888; -moz-transform: scale(1.1) rotate(0deg) translateX(1px) translateY(1px) skewX(0deg) skewY(0deg);
}
</style>

您的HTML

<div id="wrapper"> 
<div class="block4 color1"> </div><!--block-long-->
<div class="block3 color3"></div><!--block-short-->
<div class="block3 color3"></div><!--block-short-->
<div class="clear"></div> 
<div id="subdivholder"><!--New inserted code-->
         <div class="block3 color3"></div><!--block-short-->
         <div class="block3 color3"></div><!--block-short-->
</div>
<div id="block1"></div><!--block-big-->
<div class="block3 color3"></div><!--block-short-->
<div class="block3 color3"></div><!--block-short-->
<div class="clear"></div> 
<div class="block4 color1"> </div><!--block-long-->
<div class="block4 color2"> </div><!--block-long-->
<div class="clear"></div>
</div><!--wrapper-->

地铁风格的位置

2 个答案: