2017-12-27 353 views
0

我是網絡開發的新手,我被困在這個問題上。我想要做的是在左邊(20-30%寬/小方塊)和img(70-80%大方塊)右邊然後右邊顯示一個字。直接在它下面有一個小的img盒大字框在右邊。 對於我的生活,我不能同時做到這一點。 對不起,我正在描述它是我能做到的最好的方式。 我希望它看起來像這個網站的預訂和關於div。 https://dribbble.com/shots/2052368-Faicco-s-Italian-Restaurant-Parallax/attachments/366053用不同尺寸創建img和p標籤

function sorry(){ 
 
\t alert("This is just a example.") 
 
}
body{ 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
img{ 
 
\t max-width: 100%; 
 
} 
 
h1,h2,h3,h4,p{ 
 
\t margin: 0; 
 
} 
 
.cf:before, 
 
.cf:after { 
 
    content: " "; 
 
    display: table; 
 
} 
 
.cf:after { 
 
    clear: both; 
 
} 
 

 
html{ 
 
    background: url("background.jpg") no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
background-size: 100% 100% 
 
} 
 
#header-background{ 
 
\t background: url("restaurant.jpg"); 
 
\t height: 75vh; 
 
\t width: 90%; 
 
\t margin: 5% auto 0 auto ; 
 
\t background-size: cover; 
 
\t background-size: 100% 100% 
 
} 
 
header h3{ 
 
\t float: left; 
 
    margin: 21px 0 0 45px; 
 
\t font-family: Brush Script MT, cursive; 
 
\t font-size: 42px; 
 
\t color: white; 
 
} 
 
nav{ 
 
\t float: right; 
 
\t display: inline-block; 
 
\t position: relative; 
 
\t right: 5%; 
 
\t top:1.5%; 
 
} 
 
nav ul{ 
 
\t list-style-type: none; 
 
} 
 
nav li{ 
 
\t float: left; 
 
\t text-decoration: none; 
 
    margin: 0 27px; 
 
    padding: 0; 
 
    display: flex; 
 
    justify-content: space-around; 
 
    color: white; 
 
    font-family: 'Lobster', cursive; 
 
} 
 
nav li:before{ 
 
\t padding-right:10px; 
 
} 
 
#header-middle{ 
 
\t width: 50%; 
 
\t margin:200px auto 0 auto; 
 
\t text-align: center; 
 
} 
 
.rise h1{ 
 
\t font-size: 50px; 
 
\t color: white; 
 
\t margin:0; 
 
\t letter-spacing: 4px; 
 

 

 
} 
 
.rise h2{ 
 
\t font-size: 50px; 
 
\t color: white; 
 
\t margin: 0; 
 
} 
 
.rise{ 
 
\t position: relative; 
 
\t animation-name: rise; 
 
\t animation-duration: 1.5s; 
 
} 
 
@keyframes rise{ 
 
\t 0% {bottom: -500px; opacity:-3;} 
 
\t 100%{ bottom: 0px; opacity: 1; } 
 
} 
 
.rise2{ 
 
\t position: relative; 
 
\t animation-name: rise2; 
 
\t animation-duration: 2s; 
 
} 
 
@keyframes rise2{ 
 
\t 0% {bottom:-500;opacity:-8;} 
 
\t 100%{bottom:0px; opacity:1;} 
 
} 
 
/*Inner Content*/ 
 
#middle{ 
 
\t height: 45vh; 
 
\t width: 90%; 
 
    margin: 0 auto 5% auto ; 
 
\t background-color: WhiteSmoke; 
 
} 
 
#inner-content-wrapper{ 
 
\t width: 80%; 
 
} 
 
#inner-wrapper{ 
 
\t position: relative; 
 
\t bottom: 35px; 
 
\t width: 50%; 
 
\t margin: 0 auto; 
 
    background-color: white; 
 
} 
 
#wrapper{ 
 
\t position: absolute; 
 
\t width: 100%; 
 
} 
 
#inner-content{ 
 
\t width: 80%; 
 
    object-fit: contain; 
 
\t float: left; 
 
\t display: block; 
 
} 
 
#inner-content img{ 
 
max-width: 100%; 
 
max-height:100%; 
 
display: block; 
 
} 
 
#inner-content:first-child { 
 
    \t width: 20%; 
 
} 
 
#inner-content:nth-child(3){ 
 
\t \t width: 20%; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <link rel="stylesheet" type="text/css" href="food.css"> 
 
\t <title></title> 
 
</head> 
 
<body> 
 
    <div id="header-background"> 
 
\t <div class="cf"> 
 
\t \t <header > 
 
\t \t <h3>Taco Día Del</h3> 
 
\t \t  <nav> 
 
\t \t \t <ul> 
 
\t \t \t \t <li>Shop</li> 
 
\t \t \t \t <li>Recipes</li> 
 
\t \t \t \t <li>News</li> 
 
\t \t \t \t <li>About Us</li> 
 
\t \t \t \t <li>Contact</li> 
 
\t \t \t </ul> 
 
\t \t  </nav> 
 
\t \t </header> 
 
\t </div> 
 
\t  <div id="header-middle" class="rise"> 
 
\t \t <h2>Taco Día Del</h2> 
 
\t \t <h1 class="rise2">Mexican Specialties</h1> 
 
\t \t </div> 
 
    </div> 
 

 
    <div id="wrapper"> 
 
     <div id="middle"> 
 
     \t <div id="inner-wrapper" class="cf"> 
 
     \t \t <div id="inner-content-wrapper" class="cf"> 
 
       <div id="inner-content" class="cf"> 
 
     \t \t  <h2>Reservation</h2> 
 
     \t \t  <br> 
 
     \t \t  <p>Call us now to book a table in our restaurant. Calls must be in the same day as the reservation.</p> 
 
       <br> 
 
       <a onclick="sorry()">BOOK A TABLE</a> 
 
      </div> 
 
      </section> 
 
       <div id ="inner-content" class="cf"> 
 
     \t \t  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/001_Tacos_de_carnitas%2C_carne_asada_y_al_pastor.jpg/1200px-001_Tacos_de_carnitas%2C_carne_asada_y_al_pastor.jpg"> 
 
     \t \t </div> 
 
     \t \t <!--Extra--> 
 
     \t \t     <div id ="inner-content" class="cf"> 
 
     \t \t  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/001_Tacos_de_carnitas%2C_carne_asada_y_al_pastor.jpg/1200px-001_Tacos_de_carnitas%2C_carne_asada_y_al_pastor.jpg"> 
 
     \t \t </div> 
 
     \t \t <div id="inner-content" class="cf"> 
 
     \t \t  <h2>Reservation</h2> 
 
     \t \t  <br> 
 
     \t \t  <p>Call us now to book a table in our restaurant. Calls must be in the same day as the reservation.</p> 
 
       <br> 
 
       <a onclick="sorry()">BOOK A TABLE</a> 
 
      </div> 
 
      </section> 
 

 
     \t \t </div> 
 
     \t </div> 
 
     </div> 
 
    </div> 
 
<script type="text/javascript" src="food.js"></script> 
 
</body> 
 
</html>

回答

1

有很多的問題要與你的代碼,開始你是如何命名的標籤。幾乎所有的標籤都使用了相同的ID。如果要使用相同的CSS樣式對多個元素進行樣式設置,請使用不是ID的類。併爲您想要改變風格的單個元素提供唯一的ID。 我剛取出來的代碼的相關部分,並修改了一些東西來演示如何網格(響應)已經或可以實現:

  • 而不是使用的img標籤,使用圖像作爲背景爲包含它的div。
  • 使用vw單位創建具有相同尺寸的正方形,並使其自身響應。
  • 對於字體,你也可以使用如下所示的vw單位。
  • 根據元素的唯一ID將元素左右浮動。

注意:這僅僅是一個不從 從頭開始實現這個代碼的解決方法。但有很多更好更清潔的方法可以實現這一點 。你可以使用CSS網格或flexbox等。

function sorry() { 
 
    alert("This is just a example.") 
 
}
#wrapper{ 
 
width:100%; 
 
} 
 

 
.inner-content-wrapper { 
 
width:81vw; 
 
margin:0 auto; 
 
} 
 

 
#inner-content1, 
 
#inner-content4 { 
 
    width: 20vw; 
 
    height: 20vw; 
 
    font-size: 1.3vw; 
 
    float:left; 
 
    border:1px solid gray; 
 
} 
 

 
#inner-content4{ 
 
float:right; 
 
} 
 

 
#inner-content1, 
 
#inner-content2, 
 
#inner-content3, 
 
#inner-content4 { 
 
    display: block; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#inner-content2 { 
 
    width: 60vw; 
 
    height: 20vw; 
 
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/001_Tacos_de_carnitas%2C_carne_asada_y_al_pastor.jpg/1200px-001_Tacos_de_carnitas%2C_carne_asada_y_al_pastor.jpg"); 
 
    background-size:cover; 
 
    float:right; 
 
    border:1px solid gray; 
 
} 
 

 
#inner-content3 { 
 
float:left; 
 
    width: 60vw; 
 
    height: 20vw; 
 
    border:1px solid gray; 
 
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/001_Tacos_de_carnitas%2C_carne_asada_y_al_pastor.jpg/1200px-001_Tacos_de_carnitas%2C_carne_asada_y_al_pastor.jpg"); 
 
    background-size:cover; 
 
}
<div id="wrapper"> 
 
<div id="inner-wrapper" class="cf"> 
 
    <div class="inner-content-wrapper" class="cf"> 
 
    <div id="inner-content1" class="cf"> 
 
     <h2>Reservation</h2> 
 
     <br> 
 
     <p>Call us now to book a table in our restaurant. Calls must be in the same day as the reservation.</p> 
 
     <br> 
 
     <a onclick="sorry()">BOOK A TABLE</a> 
 
    </div> 
 
    <div id="inner-content2"> 
 
    </div> 
 
    </div> 
 
    <div class="inner-content-wrapper" class="cf"> 
 
    <div id="inner-content3"> 
 
    </div> 
 
    <div id="inner-content4" class="cf"> 
 
     <h2>Reservation</h2> 
 
     <br> 
 
     <p>Call us now to book a table in our restaurant. Calls must be in the same day as the reservation.</p> 
 
     <br> 
 
     <a onclick="sorry()">BOOK A TABLE</a> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div>

+0

非常感謝你的建議和幫助我。我自我教導自己和我收到的所有建議,我真的很感激。 – Ace