0

我已经设置了 JsFiddle示例

<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>

如果您在示例中看到有时它部分显示在一行中，其余部分显示下一行，我希望所有类“progressContainer”的 Div 应该完全显示在一行中。

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

4

2 回答 2

2

添加.progressWrapper

margin-right:auto;
float:left;
于 2012-11-02T20:38:19.467 回答
0

与其将 div 设置为 ，不如display:inline;将它们设置为display: inline-block;，它们将开始表现。你需要调整你的宽度等来品尝。享受。

比浮动更好，除非您需要支持旧版本的 IE。

于 2012-11-02T20:39:09.787 回答