Question

我对CSS设计很感兴趣，我想设计一个类似于以下内容的页面。

我可以使用span属性分隔图像，但我无法将文本和按钮作为单行放置。

http://4.bp.blogspot.com/_cPEUCNW5H44/S4ZCS-H07sI/AAAAAAAAPPk/dNsF1CMIm4s/s1600-h/UI.PNG

这是我到目前为止所做的事情

<div align="center">
    <span style="border:1px solid #ECECEC;margin: 10px">
     <img src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/>
    </span>
    <span style="border:1px solid #ECECEC;margin: 10px">
     <img alt="" src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/>
    </span>
    <span style="border:1px solid #ECECEC;margin: 10px">
     <img alt="" src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/>
    </span>
    <span style="border:1px solid #ECECEC;margin: 10px">
     <img alt="" src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/>
    </span>
    <span style="border:1px solid #ECECEC;margin: 10px">
     <img alt="" src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/>
    </span>
    <span style="border:1px solid #ECECEC;margin: 10px">
 <div>some text here
 </div>
 <button>XYZ</button>
    </span>
   </div>

但是我的最后一个div有“一些文字在这里”和按钮显示在底部。我知道我可以用表来设计。但我觉得我不应该在span标签中使用div标签。

欢迎任何提示/建议。

Answer 1

尝试使用float:left或类似内容，直至获得令人满意的结果。

Answer 2

Div是一个块元素，总是会在新行显示。您可以尝试使用“float：left”来覆盖此行为：

<div align="center">

    <div style="border:1px solid #ECECEC;margin: 10px; width: 100px; height: 100px; float: left">
     <img src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/>
    </div>
    <div style="border:1px solid #ECECEC;margin: 10px; width: 100px; height: 100px; float: left">
     <img alt="" src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/>
    </div>
    <div style="border:1px solid #ECECEC;margin: 10px; width: 100px; height: 100px; float: left">
     <img alt="" src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/>
    </div>
    <div style="border:1px solid #ECECEC;margin: 10px; width: 100px; height: 100px; float: left">
     <img alt="" src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/>
    </div>
    <div style="border:1px solid #ECECEC;margin: 10px; width: 100px; height: 100px; float: left">
     <img alt="" src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/>
    </div>
    <div style="border:1px solid #ECECEC;margin: 10px; width: 100px; height: 100px; float: left">
        some text here<br /><br />
        <button>XYZ</button>
    </div>

</div>

请记住，那些div需要宽度和高度属性

Answer 3

我认为div上的display:inline最适合您的需求。

Answer 4

总是使用float：left来解决所有这些问题。这将确保div标签不会添加新行。你可以用这个来实现强大的功能。

Answer 5

我认为你的直觉是正确的。大脑后面记得在某个地方看到W3C的指导是不使用内联元素（span）内的块元素（div）。从语义学的角度来看，这是愚蠢的。这有点像说句子里面有一个段落。

如果你将div改为span，我想你会得到你想要的东西。它可能＆lt; label＆gt;在语义上更正确，取决于最后一个文本的要点。

<span>some text here</span>

需要CSS定位方面的帮助

5 个答案: