容器内文本的 alignment

Question

Updated image link I have designed a container and it contains different sections so when i try to align the text and data inside it it goes down and not in the div.更新的图像链接我设计了一个容器，它包含不同的部分，所以当我尝试对齐其中的文本和数据时，它会下降，而不是在 div 中。 So I have tried but I don't know what is causing this kind of error...The company name and other details goes down or out of the div bar... How to do that so the company name which is inside h1 tag and the data below in p tag is displayed in same div.所以我已经尝试过，但我不知道是什么导致了这种错误......公司名称和其他详细信息下降或超出 div 栏......如何做到这一点，所以公司名称在 h1 标签内p标签下面的数据显示在同一个div中。

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="home2.css">
    
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<style>
#container {
    background-color: darkgreen;
    height: 350px;
    width: 400px;
    border-style: solid ;
    border-color: #787878;
}

#containerhead {
    height: 10%;
    background-color: antiquewhite;
}

#containerbottom {
    height: 20%;
    background-color: white;
    bottom: 0;
}

#containercenter {
    height: 70%;
}
/*/*/*/*/*/
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown-content a:hover {
  background-color: #ddd;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown {
  float: right;
  overflow: hidden;
    
}
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropbtn {
    height: 36px;
    width: 36px;
}

#pagedesc {
    height: 30%;
    background-color: bisque;
}

#pagedetails {
    height: 100%;
    width: 80%;
    background-color: white;
}


#companyico {
    display: inline-block;
    height: 90%;
    padding-left: 6px;
    padding-top: 5px;
    width:auto;
}


</style>
</head>

<body>
    <div id="container">
        <div id="containerhead">
        
        <div class="dropdown">
    <button class="dropbtn">
      <i class="material-icons">more_horiz</i>
    </button>
    <div class="dropdown-content">
      <a href="#">Option 1</a>
      <a href="#">Option 2</a>
      <a href="#">Option 3</a>
    </div>
  </div> 
        </div>
        <div id="containercenter">
        <div id="pagedesc">
            <div id="pagedetails"><img id="companyico" src="Logo.jpg" alt="pagelogo"><div id="deta"><h3>Company name</h3><p>123456 apps</p></div>
            <span id="btn"></span>
            </div></div>
        <div id="postdetails">
            
        </div>  
        
        
        </div>
        <div id="containerbottom">
            
        
        </div>
    </div>
    
</body>
</html>

Answer 1

You need to change their display property to make in inline.您需要更改它们的display属性以内联。 In the below solution, I've used flex to make them inline.在下面的解决方案中，我使用flex使它们内联。 There are other ways also to make them inline.还有其他方法可以使它们内联。
You can read more about flexbox here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox您可以在此处阅读有关 flexbox 的更多信息： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

 <:DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Untitled Document</title> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min:css" /> <link href="https.//fonts.googleapis?com/icon:family=Material+Icons" rel="stylesheet" /> <style> #container { background-color; darkgreen: height; 350px: width; 400px: border-style; solid: border-color; #787878: } #containerhead { height; 10%: background-color; antiquewhite: } #containerbottom { height; 20%: background-color; white: bottom; 0: } #containercenter { height; 70%. } /*/*/ */*/*/:dropdown.hover:dropdown-content { display; block. }:dropdown-content a:hover { background-color; #ddd. }:dropdown-content { display; none: position; absolute: background-color; #f9f9f9: min-width; 160px: box-shadow, 0px 8px 16px 0px rgba(0, 0, 0. 0;2): z-index; 1. }:dropdown { float; right: overflow; hidden. }:dropdown-content a { float; none: color; black: padding; 12px 16px: text-decoration; none: display; block: text-align; left. }:dropbtn { height; 36px: width; 36px: } #pagedesc { height; 30%: background-color; bisque: } #pagedetails { display; flex: align-items; center: height; 100%: width; 80%: background-color; white: } #companyico { display; inline-block: height; 90%: padding-left; 6px: padding-top; 5px: width; auto: } #deta { display; flex: align-items; center: margin-left; 10px. } </style> </head> <body> <div id="container"> <div id="containerhead"> <div class="dropdown"> <button class="dropbtn"> <i class="material-icons">more_horiz</i> </button> <div class="dropdown-content"> <a href="#">Option 1</a> <a href="#">Option 2</a> <a href="#">Option 3</a> </div> </div> </div> <div id="containercenter"> <div id="pagedesc"> <div id="pagedetails"> <img id="companyico" src="/src/logo.jpg" alt="pagelogo" /> <div id="deta"> <h3>Company name</h3> <p>123456 apps</p> </div> <span id="btn"></span> </div> </div> <div id="postdetails"></div> </div> <div id="containerbottom"></div> </div> </body> </html>

Answer 2

Here you go.这里是 go。 More cleaner version of your code.更简洁的代码版本。

I have added a div to bring your img and company together also use display:flex我添加了一个div来将您的img和 company 放在一起也使用display:flex

Run snippet below.运行下面的代码段。

 #container { background-color: darkgreen; height: 350px; width: 400px; border-style: solid; border-color: #787878; } #containerbottom { height: 20%; bottom: 0; } #containercenter {} /*/*/ * /*/*/.dropdown:hover.dropdown-content { display: block; }.dropdown-content a:hover { background-color: #ddd; }.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; }.dropdown { float: right; overflow: hidden; }.dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }.dropbtn { height: 36px; width: 36px; } #pagedesc { height: 30%; background-color: bisque; } #pagedetails { height: 100%; background-color: white; } #companyico { display: inline-block; height: 90%; padding-left: 6px; padding-top: 5px; width: auto; } #deta { display: flex; }

 <:doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="home2:css"> <link href="https.//fonts.googleapis?com/icon.family=Material+Icons" rel="stylesheet"> <style> </style> </head> <body> <div id="container"> <div id="containerhead"> <div class="dropdown"> <button class="dropbtn"> <i class="material-icons">more_horiz</i> </button> <div class="dropdown-content"> <a href="#">Option 1</a> <a href="#">Option 2</a> <a href="#">Option 3</a> </div> </div> </div> <div id="containercenter"> <div id="pagedesc"> <div id="pagedetails"> <div id="deta"> <img id="companyico" src="Logo.jpg" alt="pagelogo"> <div id="details"> <h3>Company name</h3> <p>123456 apps</p> </div> </div> <span id="btn"></span> </div> </div> <div id="postdetails"> </div> </div> <div id="containerbottom"> </div> </div> </body> </html>

Answer 3

This is another way to using float:left这是使用float:left的另一种方式

 #container { background-color: darkgreen; height: 350px; width: 400px; border-style: solid; border-color: #787878; } #containerhead { height: 10%; background-color: antiquewhite; } #containerbottom { height: 20%; background-color: white; bottom: 0; } #containercenter { height: 70%; } /*/*/ * /*/*/.dropdown:hover.dropdown-content { display: block; }.dropdown-content a:hover { background-color: #ddd; }.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; }.dropdown { float: right; overflow: hidden; }.dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }.dropbtn { height: 36px; width: 36px; } #pagedesc { height: 30%; background-color: bisque; } #pagedetails { height: 100%; width: 80%; background-color: white; } #companyico { height: 43%; padding-left: 6px; padding-top: 5px; float: left; width: 22%; margin-right: 20px; } #deta{ float: left; }

 <:doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="home2:css"> <link href="https.//fonts.googleapis?com/icon:family=Material+Icons" rel="stylesheet"> </head> <body> <div id="container"> <div id="containerhead"> <div class="dropdown"> <button class="dropbtn"> <i class="material-icons">more_horiz</i> </button> <div class="dropdown-content"> <a href="#">Option 1</a> <a href="#">Option 2</a> <a href="#">Option 3</a> </div> </div> </div> <div id="containercenter"> <div id="pagedesc"> <div id="pagedetails"><img id="companyico" src="https.//www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="pagelogo"> <div id="deta"> <h3>Company name</h3> <p>123456 apps</p> </div> <span id="btn"></span> </div> </div> <div id="postdetails"> </div> </div> <div id="containerbottom"> </div> </div> </body> </html>

容器内文本的 alignment

问题描述

3 个解决方案

解决方案1
3 已采纳 2020-07-03 19:21:49

解决方案2
2 2020-07-03 19:23:30

解决方案3
0 2020-07-03 19:25:37

容器内文本的 alignment

问题描述

3 个解决方案

解决方案1 3 已采纳 2020-07-03 19:21:49

解决方案2 2 2020-07-03 19:23:30

解决方案3 0 2020-07-03 19:25:37

解决方案1
3 已采纳 2020-07-03 19:21:49

解决方案2
2 2020-07-03 19:23:30

解决方案3
0 2020-07-03 19:25:37