如何：两个div左移一个静态而另一个响应

时间：2016-12-23 05:26:03

标签： javascript jquery html css image

在我的主容器.Picture-Black中，我有两个浮动到左边的div。 .Picture-Left和.Picture-Right我希望正确的div是静态的，而包含图像的左边的div是响应的。

我已设置.Picture-Black{max-width: 900px}

.Picture-Left{max-width: 640px}

.Picture-Right{width: 260px}

我想要实现的是在调整窗口大小小于900px时缩小图像。只是左边的div和图像。我希望正确的div保持不变（静态）

我所面对的是，在调整大小时图像不是更小，它不会改变，而右边的div将会转到左边div的底部。

HTML 

<div class="Picture-Black">
<div class="Picture-Left">

    <div class="Picture"><img src="1.jpg" width="100%" /></div>
</div>
<div class="Picture-Right">
    <div class="Picture-Info">Hilarious</div>
    <div class="Picture-Info">Original</div>
    <div class="Picture-Info" style="margin-bottom: 5px">Comments 0</div>
    <div class="Picture-Uploader" style="margin-bottom: 5px">Farris</div>
    <div class="Picture-Rate">Hilarious</div>
    <div class="Picture-Rate">Funny</div>
    <div class="Picture-Rate">Okay</div>
</div>
</div>

CSS 

@media only screen and (min-width: 500px){

.Picture-Black{
    max-width: 900px;
    height: auto;
    overflow: auto;
    background-color: #222;
    margin: auto;
}

.Picture-Left{
    max-width: 100%;
    height: auto;
    overflow: auto;
    float: left;
}

.Picture-Right{
    width: 250px;
    padding: 5px;
    float: left;
    height: auto;
    overflow: auto;
}

.Picture-Caption{
    max-width: 620px;
    min-height: 30px;
    padding: 10px;
    background-color: #FFF;
    font-size: 22px;
    color: #222;
}

.Picture{
    width: 100%;
    max-width: 640px;
    height: auto;
    overflow: auto;
}

.Picture-Info{
    width: 230px;
    padding: 10px;
    height: 30px;
    background-color: #FFF;
    color: #222;
    text-align: center;
    font-size: 30px;
}

.Picture-Uploader{
    width: 230px;
    padding: 10px;
    height: 30px;
    background-color: #2E8ECE;
    color: #FFF;
    text-align: center;
    font-size: 30px;
}

.Picture-Rate{
    width: 230px;
    padding: 10px;
    height: 20px;
    background-color: #CE1126;
    color: #FFF;
    text-align: center;
    font-size: 20px;
}

}

4 个答案:

答案 0 :(得分：0)

您需要将其宽度设置为100％

.Picture img{
    width: 100%;
    max-width: 100%;
    height: auto;
}


.Picture{
    max-width: 640px;
    height: auto;
    overflow: auto;
}

.Picture img{
    width:100%;
    max-width: 100%;
    height: auto;
}
<div class="Picture-Black">
<div class="Picture-Left">
    <div class="Picture-Caption">I want to eat breakfast today not tomorrow</div>
    <div class="Picture"><img src="https://static.pexels.com/photos/50704/car-race-ferrari-racing-car-pirelli-50704.jpeg" /></div>
</div>
<div class="Picture-Right">
    <div class="Picture-Info">Hilarious</div>
    <div class="Picture-Info">Original</div>
    <div class="Picture-Info" style="margin-bottom: 5px">Comments 0</div>
    <div class="Picture-Uploader" style="margin-bottom: 5px">Farris</div>
    <div class="Picture-Rate">Hilarious</div>
    <div class="Picture-Rate">Funny</div>
    <div class="Picture-Rate">Okay</div>
</div>
</div>

答案 1 :(得分：0)

信不信由你，<video>元素是HTML5提供的最佳响应式图像容器。使用poster属性，因为您在src元素中使用<img>属性。在完整页面模式下查看它 - 调整大小是完美无缺的。没有截止或失真，它一直保持它的纵横比。

<强>段

＆＃13;
＆＃13; 
video {
  max-width: 640px;
  min-width: 300px;
}
＆＃13; 
<video poster='http://i.imgur.com/LcHFQNf.jpg' width='100%'></video>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

我认为你不应该使用较小的图像并拉伸它们。

您应该使用与div大小相匹配的图片尺寸，并将其缩小为较小的屏幕。

为包含max-width设置<div>，然后将图片的max-width设置为100%宽度的<div>

＆＃13;
＆＃13; 
.mycooldiv {
  border: 10px solid darkred;
  width 100%;
  max-width: 640px;
  margin: 0 auto;
  text-align: center
}
img {
  width: 100%
}
＆＃13; 
<div class="mycooldiv">This Div is 640px but will resize itself for smaller screens - it has a red border
  <img src="http://placehold.it/1280x1000">The image above is much bigger than the div but will resize itself to fit inside.
</div>
＆＃13;
＆＃13;
＆＃13;

想要更进一步？使用srcset

您可以指定不同的图像尺寸 - 在单独的文件中 - 以不同的屏幕尺寸显示。更多关于本文的内容

Responsive Images: If you’re just changing resolutions, use srcset.

答案 3 :(得分：0)

我找到了解决问题的方法......

我所要做的就是将宽度设置为width: calc(100% - 260px)

计算帮助了我，现在它起作用了。

这是完整的解决方案......

<强> HTML 

<div class="Picture-Black">
<div class="Picture-Left">
    <div class="Picture-Caption">Men have it good. We don't need time to look good</div>
    <div class="Picture"><img src="1.jpg" width="100%" /></div>
</div>
<div class="Picture-R-Bottom">
    <div class="Picture-R-Div">
        <div class="Picture-R-Uploaer">Farris</div>
        <div class="Picture-R-Rate"></div>
        <div class="Picture-R-Share"></div>
        <div class="Picture-R-Comments"></div>
    </div>
    <div class="Picture-R-Div MT5"><img src="ad.jpg" width="100%" /></div>
</div>
<div class="Picture-Right">
    <div class="Picture-Info">Hilarious</div>
    <div class="Picture-Info" style="margin-bottom: 5px">Original</div>
    <div class="Picture-Uploader" style="margin-bottom: 5px">Farris</div>
    <div class="Picture-Info" style="margin-bottom: 5px"><span class="FL">Comments</span><span class="FR ColRed2">0</span></div>
    <div class="Picture-Rate"><span class="FL">Hilarious</span><span class="FR">123456</span></div>
    <div class="Picture-Rate"><span class="FL">Funny</span><span class="FR">123456</span></div>
    <div class="Picture-Rate"><span class="FL">Okay</span><span class="FR">123456</span></div>
</div>

<强> CSS 

@media only screen and (min-width: 600px){

.Picture-Black{
    max-width: 900px;
    height: auto;
    overflow: auto;
    background-color: #111;
    margin: auto;
}

.Picture-Left{
    width: calc(100% - 260px);
    height: auto;
    overflow: auto;
    float: left;
}

.Picture-R-Bottom{
    display: none;
}

.Picture-Right{
    width: 250px;
    padding: 5px;
    float: left;
    height: auto;
    overflow: auto;
}

.Picture-Caption{
    max-width: 640px;
    min-height: 30px;
    padding: 10px;
    background-color: #FFF;
    font-size: 15px;
    color: #222;
    font-family: cartoon;
}

.Picture{
    width: 100%;
    height: auto;
    overflow: auto;
}

.Picture-Info{
    width: 230px;
    padding: 10px;
    height: 30px;
    background-color: #FFF;
    color: #222;
    text-align: center;
    font-size: 30px;
    font-family: numbers;
}

.Picture-Uploader{
    width: 230px;
    padding: 10px;
    height: 30px;
    background-color: #2E8ECE;
    color: #FFF;
    text-align: center;
    font-size: 17px;
    font-family: cartoon;
}

.Picture-Rate{
    width: 230px;
    padding: 10px;
    height: 20px;
    background-color: #CE1126;
    color: #FFF;
    text-align: center;
    font-size: 20px;
    font-family: numbers;
}

.Picture-Rate:hover{
    background-color: #AC0F1F;
    cursor: pointer;
}

}

@media only screen and (max-width: 599px){

.Picture-Black{
    width: auto;
    margin: 10px;
    height: auto;
    overflow: auto;
    background-color: #111;
}

.Picture-Left{
    width: 100%;
    height: auto;
    overflow: auto;
}

.Picture-Caption{
    max-width: 100%;
    min-height: 30px;
    padding: 10px;
    background-color: #EEE;
    font-size: 15px;
    color: #222;
    font-family: cartoon;
}

.Picture{
    width: 100%;
    height: auto;
    overflow: auto;
}

.Picture-R-Bottom{
    width: auto;
    margin: 5px;
}

.Picture-Right{
    display: none;
}

.Picture-R-Uploaer{
    width: calc(100% - 185px);
    padding: 10px;
    height: 30px;
    background-color: #2E8ECE;
    color: #FFF;
    text-align: center;
    font-size: 17px;
    font-family: cartoon;
    float: left;
    margin-right: 5px;
}

.Picture-R-Rate{
    width: 30px;
    height: 30px;
    padding: 10px;
    background-color: #CE1126;
    margin-right: 5px;
    float: left;
}

.Picture-R-Share{
    width: 30px;
    height: 30px;
    padding: 10px;
    background-color: #3B5998;
    margin-right: 5px;
    float: left;
}

.Picture-R-Comments{
    width: 30px;
    height: 30px;
    padding: 10px;
    background-color: #FFF;
    float: left;
}

.Picture-R-Div{
    width: auto;
    height: auto;
    overflow: auto;
    clear: both;
}

}
相关问题
最新问题