Question

我正在努力实现以下目标，我无法让它做我想做的事。

90％的页面并居中
5px强调
logo左侧
右侧但右下角的文字证明

.box2 {
  border-bottom: 5px solid #2ea9e0;
  overflow: hidden;
  max-width: 90%;
}

.alignleft {
  float: left;
}

.alignright {
  float: right;
  vertical-align: bottom;
  overflow: hidden;
}

img {
  width: 115px;
  height: 91px;
}

<div class="box2">
  <p class="alignleft"><img src="http://placehold.it/115x91" alt=""></p>
  <p class="alignright">Hello</p>
</div>
<div style="clear: both"></div>

我想做什么

我得到了什么

Answer 1

您可以使用 Flexbox 执行此操作：

＆＃13;

.box2 {
  display: flex; /* displays flex-items (children) inline */
  align-items: flex-end; /* vertically aligns them at the bottom */
  justify-content: space-between; /* places them away from each other as far as it can */
  border-bottom: 5px solid #2ea9e0;
  overflow: hidden;
  max-width: 90%;
  margin: 0 auto;
}

img {
  width: 115px;
  height: 91px;
}

＆＃13;

<div class="box2">
  <p class="alignleft"><img src="http://placehold.it/115x91" alt=""></p>
  <p class="alignright">Hello</p>
</div>

＆＃13;

Answer 2

flex将帮助您实现这一目标。在css中添加了一些.box2。 align-items: baseline; flex与.box2{ align: center; border-bottom: 5px solid #2ea9e0; overflow: hidden; max-width: 90%; display: flex; justify-content: space-between; align-items: baseline; } .alignleft { float: left; } .alignright { float: right; vertical-align: bottom; overflow:hidden; }将解决您的问题。

＆＃13;

<div class="box2">
<p class="alignleft"><img src="http://via.placeholder.com/140x100" alt="" width="115" height="91" /></p>
<p class="alignright">Hello</p>
</div>
<div style="clear: both;"></div>

＆＃13;

{{1}}

＆＃13;

Answer 3

使用flex属性。有了它，就不需要浮动属性了。

＆＃13;

app.get('/adduser',company.users);
app.get('/deleteuser/:email',function(req,res){

    var email=req.params.email;
    var sql="DELETE FROM appuser where email='"+ email +"'";
    connection.query(sql,function(err,res){
        if(err)
            console.log(err)
        else
            {
                alert("deleted")
            }
    });
    res.render('adduser');
})

＆＃13;

 

.box2{
   display: flex;
   align-items: flex-end;
   margin: 0 auto;
   border-bottom: 5px solid #2ea9e0;
   overflow: hidden;
   max-width: 90%;
}

.alignright {
     margin-left: auto;  
     margin-bottom: 0;      
     padding: 0;
}
p {
     padding: 0;
     margin-bottom: 0;      
}

＆＃13;

Answer 4

.box2{
   align: center;
   border-bottom: 5px solid #2ea9e0;
   overflow: hidden;
   max-width: 100%;
}

.alignleft {
    float: left;
    
}
.alignright {
		float: right;
        vertical-align: bottom; 
		margin-top:90px;
}

<div class="box2">
  <p class="alignleft">
   <img src="https://www.w3schools.com/howto/img_avatar.png" alt="" width="115" height="91" />
   </p>
<p class="alignright">HELLO</p>
</div>

Answer 5

.box2{
   align: center;
   border-bottom: 5px solid #2ea9e0;
   overflow: hidden;
   max-width: 90%;
   margin-left:15px
}

.alignleft {
    float: left;
}
.alignright {
    float: Right;
        vertical-align: bottom; 
        overflow:hidden;
     
        padding: 0px 0px 0px 10px;
}

<div class="box2">
<p class="alignleft"><img src="logo.jpg" alt="" width="115" height="91" /></p>
<p class="alignright">Hello</p>
</div>

样式CSS用于同一行上的徽标和文本

5 个答案: