我是网络开发的新手，我遇到了这个问题。我想要做的是在左边显示一个单词（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>
答案 0 :(得分：1)
您的代码存在很多问题，从您对代码的命名方式开始。几乎所有标签都使用了相同的ID。如果要使用相同的CSS样式设置多个元素的样式，请使用不是ID的类。并为要以不同方式设计样式的各个元素提供唯一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>