Question

我正在制作一个十页的网站，我制作了总体布局，但我无法弄清楚如何在div框中定位图像和文字。什么都行不通。在这个特定的页面中，我希望图像位于Div的右上角，文本位于左侧。我觉得如果我能够了解它是如何工作的，我也能够为其他页面做到这一点。

以下是我的代码：

<!DOCTYPE html>
    
        <html>
    
    
    
        <style>
        h1{
           color:white;
           font-size: 50px;
           font-family: ultra;
        }
    
        p{
        color:white;
        }
    
        h2{
        color:white;
        }
    
        body {
            font-family: "Lato", sans-serif;
        }
    
    
    
        .sidenav {
            height: 100%;
            width: 250px;
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            background-color: red;
            overflow-x: hidden;
            padding-top: 60px;
        }
    
        .sidenav a {
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 25px;
            color: black;
            display: block;
        }
    
        .sidenav a:hover {
            color: #818181;
       }
    
        .main {
            margin-left: 250px; 
            font-size: 28px; 
     
        }
    
    @media screen and (max-height: 450px) {
        .sidenav {padding-top: 15px;}
        .sidenav a {font-size: 18px;}
    }
    
    
    body {
    	
    	background-color:#252525;
    	background-attachment:fixed;
    	background-position: 50% 50%;
    	background-repeat:no-repeat;
    
    
    
      margin: 0;
    }
    
    
    
    .header {
        background-color: #252525;
        padding: 10px;
        margin-left: 250px;
        text-align: center;
    }
    
    
    
    
    
    .rcorners1 {
        margin: auto;
        
        border-radius: 25px;
        background: #73AD21;
        padding: 20px;
        width: 90%;
        height: 1000px;
    
    	
    	
    
    
    </style>
    
    
    <body>
    
    <div class="sidenav">
    <a href="home.html">Home</a>
    <a href="about.html">About</a>
    <a href="Why Us.html">Why Us?</a>
    <a href="Meet The Team.html">Meet The Team</a>
    <a href="Gear.html">Gear</a>
    <a href="Services.html">Services</a>
    <a href="Products.html">Products</a>
    <a href="Satisfied Customers.html">Reviews</a>
    <a href="Location.html">Location</a>
    <a href="Contact Us.html">Contact Us</a>
    </div>
    
    
    
    
    <div class="header">
      <h1>GEAR</h1>
    </div>
    
    
    <div align="center">
    <div class="main">
        <div class="rcorners1" style="background-color: #fffafa;" "text-align:right;"> 
        <img src="Our Gadgets.jpg" class="expand" width="400" height="391" alt=""/> 
        <div>Content for New Div Tag Goes Here</div>
      </div>
    </div>
    </body>
    </html>

Answer 1

您可以使用float: right属性来实现您的目标。试试这段代码。

＆＃13;

h1{
     color:white;
     font-size: 50px;
     font-family: ultra;
}
 p{
     color:white;
}
 h2{
     color:white;
}
 body {
     font-family: "Lato", sans-serif;
}
 .sidenav {
     height: 100%;
     width: 250px;
     position: fixed;
     z-index: 1;
     top: 0;
     left: 0;
     background-color: red;
     overflow-x: hidden;
     padding-top: 60px;
}
 .sidenav a {
     padding: 8px 8px 8px 32px;
     text-decoration: none;
     font-size: 25px;
     color: black;
     display: block;
}
 .sidenav a:hover {
     color: #818181;
}
 .main {
     margin-left: 250px;
     font-size: 28px;
}
 @media screen and (max-height: 450px) {
     .sidenav {
        padding-top: 15px;
    }
     .sidenav a {
        font-size: 18px;
    }
}
 body {
     background-color:#252525;
     background-attachment:fixed;
     background-position: 50% 50%;
     background-repeat:no-repeat;
     margin: 0;
}
 .header {
     background-color: #252525;
     padding: 10px;
     margin-left: 250px;
     text-align: center;
}
 .rcorners1 {
     margin: auto;
     border-radius: 25px;
     background: #73AD21;
     padding: 20px;
     width: 90%;
     height: 1000px;
}
 .main img {
     float: right;
     margin-left: 10px;
}
 .clear {
     clear: both;
}

＆＃13;

<!DOCTYPE html>
<html>
   <body>
      <div class="sidenav">
         <a href="home.html">Home</a>
         <a href="about.html">About</a>
         <a href="Why Us.html">Why Us?</a>
         <a href="Meet The Team.html">Meet The Team</a>
         <a href="Gear.html">Gear</a>
         <a href="Services.html">Services</a>
         <a href="Products.html">Products</a>
         <a href="Satisfied Customers.html">Reviews</a>
         <a href="Location.html">Location</a>
         <a href="Contact Us.html">Contact Us</a>
      </div>
      <div class="header">
         <h1>GEAR</h1>
      </div>
      <div align="center">
         <div class="main">
            <div class="rcorners1" style="background-color: #fffafa;" "text-align:right;"> 
            <img src="http://via.placeholder.com/300" class="expand" width="100" height="100" alt=""/> 
            <div class="text">Content for New Div Tag Goes Here</div>
            <div class="clear"></div>
         </div>
      </div>
   </body>
</html>

＆＃13;

Answer 2

您的代码填写错误，请从代码中查看以下示例，添加另一个</div>代码。

<div align="center">
<div class="main">
    <div class="rcorners1" style="background-color: #fffafa;" "text-align:right;"> 
    <img src="Our Gadgets.jpg" class="expand" width="400" height="391" alt=""/> 
    <div>Content for New Div Tag Goes Here</div>
  </div>
</div>

如果您将图片放在右上方，而文本放在左侧，那么只需使用bootstrap在图像和文本中制作.col-md-6 .col-sm-12 .col-xs-12等网格

或

如果你在图像周围包装文字，然后在图像上使用float: right，它将向右移动，文字将包裹图像。

顺便说一句，代码看起来很混乱，不要将样式放在HTML页面中，为此使用外部样式表。

如何在div中定位图像和文本？

2 个答案: