Question

Here is the schema I'd like to have http://imgur.com/0CwOpVG

<div class='yellow/brown'>
    <div class='green'>Some sentence</div>
    <div class='blue_wrapper'>
        <a>
            <img src="" class="blue1">
        </a>
        <a>
            <img class="blue2" src="">
        </a>
     </div>
</div>

现在整套都是棕色，但我希望它像黄色。这是css：

.blue_wrapper{
    position: relative; top: 0px; letter-spacing: 1px;
}

.yellow/brown{
    border-bottom: 1px solid blacK;
    padding: 20px;
}

.green{
    letter-spacing: 0;
    padding: 5px;
    display:inline-block;
    position: relative;
    width: 100%;
}

.blue1, .blue2{
    display: block;
    float: right;
    margin-bottom: 12px;
    vertical-align: text-top;
    width: 1.5vw;
}

我已经多次尝试但总是失败。有谁知道怎么样？非常感谢你的帮助...

Answer 1

如果我理解正确，您希望代码能够反映链接中两者的顶部图像。代码在下面的链接中。这很简单。但我确实想警告你/运算符不是有效的类命名（我忘记了这个词）。

.green{
    width:500px;
    margin:0 auto;
}

.yellow{
    letter-spacing: 0;
    float:left;
    padding: 5px;
    display:inline-block;
    position: relative;
    width: 70%;
    border:2px solid orange;
    border-radius:10px;
}
.blue_wrapper{
    float:left;
}
.blue1{
    display: block;
    vertical-align: text-top;
}

.blue2{
    display: block;
    vertical-align: text-top;
    transform: rotate(180deg);
}

这是您的DEMO

Answer 2

你可以像这样接近它：

＆＃13;

.wrap {
    display: table; 
    table-layout: 
    fixed; width: 100%;
}
.images{
    width: 20px;
}
.content, .images {
    display: table-cell;
    vertical-align: middle;
}

＆＃13;

<div class='wrap'>
    <div class='content'>Some sentence</div>
    <div class='images'>
        <a>
            <img src="https://unsplash.it/20/20">
        </a>
        <a>
            <img src="https://unsplash.it/20/20">
        </a>
     </div>
</div>

＆＃13;

放置<a> tag with image one on top of another

2 个答案: