这显然是或应该是一个荒谬的问题。在一个更大的网站(wordpress)的框架内开发一些网页内容,我正在研究某种“看起来”的内容。用于导航。这个外观是每个页面内容底部的大蓝色方块,它们并排放置,每个都包含链接文本,以及文本和框作为实体都可以点击的位置。
理想情况下,对于响应性,当屏幕空间变窄时,这些框将翻转到新行并形成多个按钮行。
除了CSS之外,执行这个奇迹是微不足道的,我开始将它与沐浴猫进行比较。它似乎完全不打算做我想要的事情。没有必要展示无数不同的代码片段,这些代码片段没有实现这一目标,您已经看过它们了。我需要明白:
a)如何以及哪种盒子应包含文本(span,div,frame等)
b)如何对齐右下方框中的文本,以便在必要时进行文本包装
c)如何相对于彼此和页面排列方框
c.i)盒子之间需要一个小的间隙,相同的间隙要么是水平的,要么是垂直的,这取决于它们如何堆叠/包裹。
c.ii)框需要左对齐,第一个框的左边缘与前一个文本块的左边缘对齐。
c.iii)前一个文本的底部和第一个框的顶部之间需要有一致的间隙。
理想情况下,您可以提供完成工作所需的简单代码,并解释其工作原理。
修改:已解决
这在Wordpress中是关键,特别是Wordpress文本编辑器正在用于编码。 Wordpress文本编辑器不作为代码编辑器,也不会使内容不受干扰。因此,代码编辑器中的空格被解释为破坏代码原始意图的html标记。
答案 0 :(得分:2)
我认为你可以创建一个div作为父容器,每个框都作为一个div。使用跨度,您可以在每个框中包含文本。当你使盒子类的位置为" relative,"然后你可以绝对控制所包含的跨度的位置。请参阅以下示例:
HTML:
<div id="container">
<div class="box">
<span class="box-text">testing</span>
</div>
<div class="box">
<span class="box-text">testing</span>
</div>
<div class="box">
<span class="box-text">testing</span>
</div>
<div class="box">
<span class="box-text">testing</span>
</div>
</div>
CSS:
.box {
width: 100px;
height: 100px;
background-color: #336699;
float: left;
position: relative;
margin: 1em;
}
.box-text {
position: absolute;
bottom: 0;
right: 0;
text-align: right;
width: 100%;
color: #fff;
}
答案 1 :(得分:1)
<div class="bluebox">
<span class="text">Text</span>
</div>
<div class="bluebox">
<span class="text">Text</span>
</div><div class="bluebox">
<span class="text">Text</span>
</div><div class="bluebox">
<span class="text">Text</span>
</div><div class="bluebox">
<span class="text">Text</span>
.bluebox {
height: 100px;
width: 100px;
background-color: blue;
margin: 10px;
display: inline-block;
position:relative;
}
.text {
position:absolute;
bottom:0;
right:0;
width:100%;
color:white;
text-align:right;
}