Html 另一个分区内的流体分区_Html_Css

Html 另一个分区内的流体分区

html css

Html 另一个分区内的流体分区,html,css,Html,Css,我想在调整浏览器窗口大小时得到以下信息：我有一个HTML： <a class="article-link-block" href="#"> <img src="http://c69282.r82.cf3.rackcdn.com/361.jpg"> <div class="article-info"> Article Info need to be 20% of the height and always at the bottom </div

我想在调整浏览器窗口大小时得到以下信息：

我有一个HTML：

<a class="article-link-block" href="#">
<img src="http://c69282.r82.cf3.rackcdn.com/361.jpg">
<div class="article-info">
    Article Info need to be 20% of the height and always at the bottom
</div>
</a>

编辑编辑编辑

<body>

    <div id="header">
        <!-- header is 100% width of body width-->
    </div>

    <div id="content">
        <!-- container is 100% of body width -->

        <div id="articles"> 

                <!-- articles are 70% of container width-->

                <a class="article-link-block article-1" href="#">
                <img src="http://c69282.r82.cf3.rackcdn.com/361.jpg">
                <div class="article-info">
                    Article Info need to be 20% of the height and always at the bottom
                </div>
                </a>

                <a class="article-link-block article-2" href="#">
                <img src="http://c69282.r82.cf3.rackcdn.com/361.jpg">
                <div class="article-info">
                    Article Info need to be 20% of the height and always at the bottom
                </div>
                </a>

                <a class="article-link-block article-3" href="#">
                <img src="http://c69282.r82.cf3.rackcdn.com/361.jpg">
                <div class="article-info">
                    Article Info need to be 20% of the height and always at the bottom
                </div>
                </a>

                <a class="article-link-block article-4" href="#">
                <img src="http://c69282.r82.cf3.rackcdn.com/361.jpg">
                <div class="article-info">
                    Article Info need to be 20% of the height and always at the bottom
                </div>
                </a>

        </div>

        <div id="sidebar">
                <!-- sidebar is 30% of container width -->
        </div>

    </div>

    <div id="footer">
        <!-- footer is 100% of body width -->
    </div>

</body>

在“a”标记中不应该有DIV（块元素）。如果您将DIV更改为inline，我认为这可能是有效的

为了使DIV成为其父元素的20%，您需要将“a”标记设为块级元素，并给它一个高度

然后，要将其与底部对齐，需要使“a”标记位置相对，并使DIV位置绝对，底部值为“0”

a.article-link-block {
    display:block;
    position:relative
}

.article-info {
    postion:absolute;
    bottom:0;
    display:inline-block;
}

}

尽管我相信在

小提琴：

编辑（一张图片包含多篇文章）。不要使用

而是使用列表

<img>
<ul>
  <li>article</li>
  <li>article2</li>
</ul>



文章
第二条

为那个小提琴演奏：

编辑-接受答案

这可能很明显，但是图像是红色区域，而

文章信息是灰色区域吗？你能用它添加一些css吗？添加了css。有什么建议可以解决我的问题吗？问题是它会这样做：顺便说一句，绝对位置和底部0会产生奇怪的东西。有什么建议吗？我已经用传统的信息升级了我的css，去掉图像和内部DIV的浮动。如果可能的话，你能提供一个wokring示例吗，因为它没有按照你的建议工作。它根本不工作。尝试将您的浏览器大小更改为较小的大小。当您有多篇文章（来自foreach循环）时，它不起作用。底部：0正在产生问题。为此情况在我的原始答案中添加了一个变体。谢谢，但结构如下：。我也更新了我原来的帖子。我想你没有抓住重点。你的结构很糟糕（不是为了冒犯）。1） 尝试浮动元素或定位它们。我会选择位置[见答案]，因为您希望它们是100%宽度…float
对您的设计没有意义，并且可能会导致问题，因为我没有看到您清除它们。2） 
vs后者看起来像是一个段落块，包裹着一个图像和列表（都链接到某个东西）——这是一个语义问题——关闭CSS并比较两种设计。pastebin中的哪个结构？我不需要在所有的图像列表。Img是每一篇文章的背景。顺便说一句，一切都是流动的。对于一个包装，我只有一个最大宽度，我没有把它放在结构中，因为它只会使事情变得更复杂。我现在的解决方案是，我现在使用55px作为高度边距顶部：-55px，当浏览器的宽度为480时，我会将其更改为40px，如果是320到30等，但我希望它不会分步进行。无论如何，谢谢你的时间。如果没有其他人会添加答案，我会选择你的答案作为最佳答案。
a { position:relative; outline:1px dashed red; display:inline-block; width:100% }

span {
    position:absolute;
    bottom:0;
    height:20%;
    padding:5px;
    background-color:#ccc;
    width:100%
}

img { width:100% }

<p style="background-color:black"><!-- remove inline style in production code -->
    <a href="#" class="article-link-block">
        <img src="http://c69282.r82.cf3.rackcdn.com/361.jpg">
        <span>Article Info need to be 20% of the height and always at the bottom</span>
    </a>
</p>

<img>
<ul>
  <li>article</li>
  <li>article2</li>
</ul>