【发布时间】：2017-12-28 03:54:05
【问题描述】：
我是网络开发的新手，我被这个问题困住了。我要做的是在左边显示一个单词（20-30% 宽度/小方块）和 img（70-80% 大方块）在右边然后右边。在它的正下方有一个带有一个小的 img 框右边的大字框。 对于我的生活，我也无法使两者的高度相同。 对不起，我正在尽可能地描述它。 我希望它看起来像这个网站预订和关于 div。 https://dribbble.com/shots/2052368-Faicco-s-Italian-Restaurant-Parallax/attachments/366053
function sorry(){
alert("This is just a example.")
}body{
margin: 0;
padding: 0;
}
img{
max-width: 100%;
}
h1,h2,h3,h4,p{
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{
background: url("restaurant.jpg");
height: 75vh;
width: 90%;
margin: 5% auto 0 auto ;
background-size: cover;
background-size: 100% 100%
}
header h3{
float: left;
margin: 21px 0 0 45px;
font-family: Brush Script MT, cursive;
font-size: 42px;
color: white;
}
nav{
float: right;
display: inline-block;
position: relative;
right: 5%;
top:1.5%;
}
nav ul{
list-style-type: none;
}
nav li{
float: left;
text-decoration: none;
margin: 0 27px;
padding: 0;
display: flex;
justify-content: space-around;
color: white;
font-family: 'Lobster', cursive;
}
nav li:before{
padding-right:10px;
}
#header-middle{
width: 50%;
margin:200px auto 0 auto;
text-align: center;
}
.rise h1{
font-size: 50px;
color: white;
margin:0;
letter-spacing: 4px;
}
.rise h2{
font-size: 50px;
color: white;
margin: 0;
}
.rise{
position: relative;
animation-name: rise;
animation-duration: 1.5s;
}
@keyframes rise{
0% {bottom: -500px; opacity:-3;}
100%{ bottom: 0px; opacity: 1; }
}
.rise2{
position: relative;
animation-name: rise2;
animation-duration: 2s;
}
@keyframes rise2{
0% {bottom:-500;opacity:-8;}
100%{bottom:0px; opacity:1;}
}
/*Inner Content*/
#middle{
height: 45vh;
width: 90%;
margin: 0 auto 5% auto ;
background-color: WhiteSmoke;
}
#inner-content-wrapper{
width: 80%;
}
#inner-wrapper{
position: relative;
bottom: 35px;
width: 50%;
margin: 0 auto;
background-color: white;
}
#wrapper{
position: absolute;
width: 100%;
}
#inner-content{
width: 80%;
object-fit: contain;
float: left;
display: block;
}
#inner-content img{
max-width: 100%;
max-height:100%;
display: block;
}
#inner-content:first-child {
width: 20%;
}
#inner-content:nth-child(3){
width: 20%;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="food.css">
<title></title>
</head>
<body>
<div id="header-background">
<div class="cf">
<header >
<h3>Taco Día Del</h3>
<nav>
<ul>
<li>Shop</li>
<li>Recipes</li>
<li>News</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</nav>
</header>
</div>
<div id="header-middle" class="rise">
<h2>Taco Día Del</h2>
<h1 class="rise2">Mexican Specialties</h1>
</div>
</div>
<div id="wrapper">
<div id="middle">
<div id="inner-wrapper" class="cf">
<div id="inner-content-wrapper" class="cf">
<div id="inner-content" 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>
</section>
<div id ="inner-content" class="cf">
<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">
</div>
<!--Extra-->
<div id ="inner-content" class="cf">
<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">
</div>
<div id="inner-content" 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>
</section>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="food.js"></script>
</body>
</html>【问题讨论】：