问题描述:

I am relatively new to HTML and CSS and am working on recreating websites.

My output looks like this

My (sloppy) code is here:

Both the CSS and HTML

http://pastebin.com/4EVBj5zK

I would like to know how to properly align my text to the right of the div.

网友答案:

Make the text container have absolute positioning, and then position it to the very top and right of its parent.

You also need to make sure the parent element is relatively positioned.

head{font-family: Verdana, Geneva, sans-serif; 
}
body{background-color: #C0C0C0;
}
p{font-family: "Courier New", Courier, monospace;
}
.borderlist{list-style-position:inside;list-style-type:none;
}
.header{font-family: Verdana, Geneva, sans-serif;font-size: 50px;float: left-side;padding-top: 20px;padding-left: 50px;
}
a:link, a:visited, a:active{text-decoration: none;color: #292421;font-family: Verdana, Geneva, sans-serif;font-size: 20px;display: inline-block;border : 4px solid orange;width: 275px;padding: 30px;background-color: #D3D3D3;
}
a:hover{text-decoration: none;color: #292421;font-family: Verdana, Geneva, sans-serif;display: inline-block;border : 4px solid #ee7600;padding: 30px;background-color: #E8E8EE;
}
.div_top{background-color: #E18A07;width: 700px;height: 300px;padding-left: 50px;padding-top: 75px;margin-left: 75px;float:left;
  position:relative;
}
.div_top_text{width: 75px;
    top:0px;
    right:0px;
    position:absolute;padding-right: 20px;
    vertical-align:top;
}
.br_bigger{margin: 100px;padding: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style_test.css">
<title>Freepbx Support</title>
</head>
<body>
<header class="header"><b>FreePBX</b> Support</header>
<br>
<div class="div_top"><li class="borderlist"><a href="www.google.com">FreePBX initial setup</a></li><br><br><br><li class="borderlist"><a href="www.google.com">FreePBX Advanced setup</a></li><div class="div_top_text">FreePBX tech was created for beginners or experts of the open source pbx system. Read our documents or watch our help videos to learn how to use the latest version of FreePBX</div></div>
</body>
</html>
网友答案:

Try this, this solution would take care of the browser being resized. * Note: I noticed you are using li tags and I did not see any ul tag, generally li are using along with ul

.list-boxer{
    float: left;
}
.list{
    width: 275px;
  
    list-style: none;
    margin: 0px 0px;
    padding: 0px 0px;
}
.list li{
    width: inherit;
    font-family: Verdana, Geneva, sans-serif;display: inline-block;padding: 0px;
}
.list li a{
   display: block;
   padding: 30px 30px;
   margin: 25px 0px;
   border : 4px solid #ee7600;
}
.div_top_text_boxer{
    overflow: hidden;
    padding: 25px;
}
.div_top_text{
    width: 98%;
    padding: 1%;
}
<div class="list-boxer">
<ul class="list">
  <li><a href="www.google.com">FreePBX initial setup</a></li>
  <li><a href="www.google.com">FreePBX Advanced setup</a></li>
</ul>
</div>

<div class="div_top_text_boxer">
  <div class="div_top_text">
    FreePBX tech was created for beginners or experts of the open source pbx   system. Read our documents or watch our help videos to learn how to use the   latest version of FreePBX
    </div>
</div>  
相关阅读:
Top