Inline圖像和DIV和響應

我不是一個程序員，我一直試圖按照設計構建此頁面，但我努力使其響應。對於桌面，我想在左邊有一個圖像，在同一條線上有右邊的div。但是，在移動設備上，我想要100％，並且彼此相處。而在此之上，我希望他們包裝在一個div內容不超過1000像素。此外，我想要與圖像對齊的div，內部還有圖像以及文本。Inline圖像和DIV和響應

這是我的CSS看起來像：

.centerdiv{ 
    width:100%; 
    height:100%; 
    margin:auto; 
    text-align: center; 
} 
.violet{ 
    background:#c3c1ea; 
    z-index: 1; 
    width:100%; 
    overflow: hidden; 
    display:block; 

} 
.textondiv{ 
    padding: 0.5em 3em; 
    font-family: 'Futura BT Light', 'Century Gothic'; 
    font-size: 16px; 
    color: #fff; 
    text-align:left; 
} 
.titleviolet { 
    z-index: 3; 
    margin:auto; 
    width: 100%; 
    text-align: center; 
}

這是HTML：

<div style="text-align: center;"> 
    <img src="https:..." /> 
    <div class="violet"> 
    <div class="titleviolet"><img src="https:..."/> 
     <div class="textondiv">bla bla bla bla</div> 
    </div> 
    </div> 
</div>

（也......我從來沒有與.js文件的工作，但我願意圖如何，如果它使這更容易）我欣賞任何幫助，我可以得到，謝謝！

來源

2016-12-08 Silvia Pinho

如果所有目標設備的支持，您可以輕鬆地與Flexbox的佈局（http://caniuse.com/#feat=flexbox）

我稍微修改代碼以利用柔性：http://codepen.io/davidkatona/pen/woXjxy

<div class="centerdiv"> 
    <img class="responsive-image" src="http://placehold.it/350x150" /> 
    <div class="violet"> 
    <div class="titleviolet"> 
     <img src="http://placehold.it/350x150"/> 
     <div class="textondiv"> 
     bla bla bla bla 
     </div> 
    </div> 
    </div> 
</div> 

.centerdiv{ 
    width:100%; 
    max-width: 1000px; 
    height:100%; 
    display: flex; 
    flex-wrap: wrap; 
} 

.responsive-image { 
    flex-grow: 1; 
} 

.violet{ 
    background:#c3c1ea; 
    z-index: 1; 
    overflow: hidden; 
    display:block; 
    flex-grow: 1; 
} 


.textondiv{ 
    padding: 0.5em 3em; 
    font-family: 'Futura BT Light', 'Century Gothic'; 
    font-size: 16px; 
    color: #fff; 
    text-align:left; 
} 

.titleviolet { 
    z-index: 3; 
    margin:auto; 
    width: 100%; 
    text-align: center; 
}

請讓我知道如果它適合你的需求。

另一個提示：通常最好使用「.main-content-container」之類的語義類名稱，而不是像「.violet」這樣的設計相關的名稱，因爲每當你想改變它的背景，讓我們說它是藍色的不能只是一個單行的改變，但你必須在html中找到並替換每一個「紫」類的出現。

來源

2016-12-08 18:12:03

就試試這個...

<div style="text-align: center;"> 
    <img class="responsive-image" src="http://placehold.it/350x150" /> 
    <div class="violet"> 
    <div class="titleviolet"><img class="responsive-image" src="http://placehold.it/350x150" /> 
     <div class="textondiv">bla bla bla bla</div> 
    </div> 
    </div> 
</div>

來源

2016-12-08 18:18:53

使用內嵌式地顯示-FLEX上centerdiv爲您錯過了你的HTML添加dextop視圖。並且還使用img響應類來處理圖像。而最重要的是，您需要使用媒體查詢CSS移動設備來實現移動視圖。 LiveOnFiddle

body{ 
 
margin:0; 
 
} 
 
.img-responsive { 
 
    width: 100%; 
 
    display: block; 
 
    margin: 0 auto; 
 
    height: auto; 
 
} 
 
.centerdiv { 
 
display:inline-flex; 
 
    width:100%; 
 
    height: 100%; 
 
    margin: auto; 
 
    text-align: center; 
 
} 
 

 
.violet { 
 
    background: #c3c1ea; 
 
    z-index: 1; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    display: block; 
 
} 
 

 
.textondiv { 
 
    padding: 0.5em 3em; 
 
    font-family: 'Futura BT Light', 'Century Gothic'; 
 
    font-size: 16px; 
 
    color: #fff; 
 
    text-align: left; 
 
} 
 

 
.titleviolet { 
 
    z-index: 3; 
 
    margin: auto; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
@media only screen and (max-width:768px){ 
 
    .centerdiv{ 
 
    display:block; 
 
    } 
 
}

<div class="centerdiv"> 
 
<img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSipAOtp2qmDZB4Y7N8OE8nixMcnvKDAJvQJhdz1-aa3MX6-i1fcIDGSU-wow" /> 
 
    <div class="violet"> 
 
    <div class="titleviolet"><img class="img-responsive" src="https://choralista.pl/cfs/files/files/7pGEYN92YG8vyGcEJ/DemoStampRotate01-e1400242575670.png?token=eyJhdXRoVG9rZW4iOiIifQ%3D%3D" /> 
 
     <div class="textondiv">bla bla bla bla</div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-12-08 18:20:09

嘿穆斯塔法！非常感謝您的幫助，我開始設法將它們放在一起！然而..有沒有辦法避免圖像拉伸？謝謝！ –

Inline圖像和DIV和響應

回答

相關問題