Question

我已经设置了JsFiddle Example

<div id="fsUploadProgress">
   <div class="progressWrapper" id="SWFUpload_0_2" style="opacity: 1; ">
      <div class="progressContainer blue">
         <a class="progressCancel" href="#" style="visibility: hidden; "> </a>
         <div class="progressName">Photo0144111111111111111.jpg</div>
         <div class="progressBarStatus">Complete.</div>
         <div class="progressBarComplete" style=""></div>
         <div id="SWFUpload_0_2_deleteDiv" class="remove" style="text-align: right; ">
            <a href="javascript:void(0);">x</a>
         </div>
      </div>
   </div>
   <div class="progressWrapper" id="SWFUpload_0_3" style="opacity: 1; ">
      <div class="progressContainer blue">
         <a class="progressCancel" href="#" style="visibility: hidden; "> </a>
         <div class="progressName">Photo0145.jpg</div>
         <div class="progressBarStatus">Complete.</div>
         <div class="progressBarComplete" style=""></div>
         <div id="SWFUpload_0_3_deleteDiv" class="remove" style="text-align: right; ">
            <a href="javascript:void(0);">x</a>
         </div>
      </div>
   </div>
   <div class="progressWrapper" id="SWFUpload_0_2" style="opacity: 1; ">
      <div class="progressContainer blue">
         <a class="progressCancel" href="#" style="visibility: hidden; "> </a>
         <div class="progressName">Photo01441111.jpg</div>
         <div class="progressBarStatus">Complete.</div>
         <div class="progressBarComplete" style=""></div>
         <div id="SWFUpload_0_2_deleteDiv" class="remove" style="text-align: right; ">
            <a href="javascript:void(0);">x</a>
         </div>
      </div>
   </div>
   <div class="progressWrapper" id="SWFUpload_0_3" style="opacity: 1; ">
      <div class="progressContainer blue">
         <a class="progressCancel" href="#" style="visibility: hidden; "> </a>
         <div class="progressName">Photo0145.jpg</div>
         <div class="progressBarStatus">Complete.</div>
         <div class="progressBarComplete" style=""></div>
         <div id="SWFUpload_0_3_deleteDiv" class="remove" style="text-align: right; ">
            <a href="javascript:void(0);">x</a>
         </div>
      </div>
   </div>
   <div class="progressWrapper" id="SWFUpload_0_2" style="opacity: 1; ">
      <div class="progressContainer blue">
         <a class="progressCancel" href="#" style="visibility: hidden; "> </a>
         <div class="progressName">Photo0144111111.jpg</div>
         <div class="progressBarStatus">Complete.</div>
         <div class="progressBarComplete" style=""></div>
         <div id="SWFUpload_0_2_deleteDiv" class="remove" style="text-align: right; ">
            <a href="javascript:void(0);">x</a>
         </div>
      </div>
   </div>
   <div class="progressWrapper" id="SWFUpload_0_3" style="opacity: 1; ">
      <div class="progressContainer blue">
         <a class="progressCancel" href="#" style="visibility: hidden; "> </a>
         <div class="progressName">Photo0145.jpg</div>
         <div class="progressBarStatus">Complete.</div>
         <div class="progressBarComplete" style=""></div>
         <div id="SWFUpload_0_3_deleteDiv" class="remove" style="text-align: right; ">
            <a href="javascript:void(0);">x</a>
         </div>
      </div>
   </div>
   <div class="progressWrapper" id="SWFUpload_0_2" style="opacity: 1; ">
      <div class="progressContainer blue">
         <a class="progressCancel" href="#" style="visibility: hidden; "> </a>
         <div class="progressName">Photo0144.jpg</div>
         <div class="progressBarStatus">Complete.</div>
         <div class="progressBarComplete" style=""></div>
         <div id="SWFUpload_0_2_deleteDiv" class="remove" style="text-align: right; ">
            <a href="javascript:void(0);">x</a>
         </div>
      </div>
   </div>
   <div class="progressWrapper" id="SWFUpload_0_3" style="opacity: 1; ">
      <div class="progressContainer blue">
         <a class="progressCancel" href="#" style="visibility: hidden; "> </a>
         <div class="progressName">Photo0145.jpg</div>
         <div class="progressBarStatus">Complete.</div>
         <div class="progressBarComplete" style=""></div>
         <div id="SWFUpload_0_3_deleteDiv" class="remove" style="text-align: right; ">
            <a href="javascript:void(0);">x</a>
         </div>
      </div>
   </div>
   <div class="progressWrapper" id="SWFUpload_0_2" style="opacity: 1; ">
      <div class="progressContainer blue">
         <a class="progressCancel" href="#" style="visibility: hidden; "> </a>
         <div class="progressName">Photo0144.jpg</div>
         <div class="progressBarStatus">Complete.</div>
         <div class="progressBarComplete" style=""></div>
         <div id="SWFUpload_0_2_deleteDiv" class="remove" style="text-align: right; ">
            <a href="javascript:void(0);">x</a>
         </div>
      </div>
   </div>
   <div class="progressWrapper" id="SWFUpload_0_3" style="opacity: 1; ">
      <div class="progressContainer blue">
         <a class="progressCancel" href="#" style="visibility: hidden; "> </a>
         <div class="progressName">Photo0145.jpg</div>
         <div class="progressBarStatus">Complete.</div>
         <div class="progressBarComplete" style=""></div>
         <div id="SWFUpload_0_3_deleteDiv" class="remove" style="text-align: right; ">
            <a href="javascript:void(0);">x</a>
         </div>
      </div>
   </div>
</div>

我想要的所有Div类“progressContainer”应该完全显示在一行中如果你在某个例子中看到它部分显示在一行中并且剩下的显示在下一行。

对不起我是css的新手，请帮帮我

Answer 1

添加到.progressWrapper

margin-right:auto;
float:left;

Answer 2

不是将div设置为display:inline;，而是将它们设置为display: inline-block;，然后它们就会开始行动。你需要调整你的宽度等。享受。

除非您需要支持旧版本的IE，否则优于浮点数。

水平堆叠<div> </div>

2 个答案: