Question

我正在尝试将响应式网页的一部分看作：http://s17.postimg.org/k4bh7qxnj/Screen_Shot_2014_07_26_at_8_08_02_PM.png 我尝试过一些东西，然后在这个jsfiddle上找到了结果：http://jsfiddle.net/TachionFiddle/4HkTS/3/

这是我的代码：

<div id="my-wrapper" style="
    max-width: 941px;
    display: inline-block;
    width: auto;
    height: auto;">
<div class="left-stuff" style="
display:inline-block;
width: 18%;">
    <img alt="" src="http://s16.postimg.org/db3hs4ndt/sac_history.png" style="width: auto;     
        height: auto; max-width:50%;">
    <img alt="" src="http://s16.postimg.org/db3hs4ndt/sac_history.png" style="width: auto; 
         height: auto; max-width: 50%;">
    <img alt="" src="http://s16.postimg.org/db3hs4ndt/sac_history.png" style="width: auto; 
         height: auto; max-width: 50%;">
</div>
    <div class="right-stuff" style="display:inline-block;max-width: 75%">
    <img src="http://s17.postimg.org/gns7jkwkf/webbanner2.png" style="width: auto; height: auto; 
    max-width:100%;">
    </div>
</div>

Answer 1

这是一般的想法：

<div class="wrapper">
    <div class="col-10">       
        <img alt="" src="http://s16.postimg.org/db3hs4ndt/sac_history.png">
        <img alt="" src="http://s16.postimg.org/db3hs4ndt/sac_history.png">
        <img alt="" src="http://s16.postimg.org/db3hs4ndt/sac_history.png">
    </div>
    <div class="col-90">
        <img src="http://s17.postimg.org/gns7jkwkf/webbanner2.png">
    </div>
</div>

.wrapper {
    width: 100%;
}
.col-10 {
    width: 10%;
    float: left;
    vertical-align: top;
}
.col-10 img {
    display: block;
    max-width: 100%;
    width: 100%;
}

.col-90 {
    width: 90%;
    float: left;
}
.col-90 img {
    max-width: 100%;
    width: 100%;
}

DEMO

我建议将这三个块放在一个图像中，并在photoshop中将高度排成一行，这将使您的生活更轻松。

我试图以响应的方式使两个div彼此相邻

1 个答案: