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>
非常感谢你的建议和帮助我。我自我教导自己和我收到的所有建议，我真的很感激。 – Ace