P display: block; : p layout « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. p layout

P display: block;

     

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
  xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style rel="stylesheet" type="text/css">

.current {
  background: url(image-demo-2011/current_bg.jpg) top left no-repeat;
  width: 659px;
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #DBE0E8;
  padding: 0 0 25px 0;
}

.current p {
  display: block;
  float: left;
  width: 520px;
  padding: 22px 0 0 35px;
}

.current_link {
  display: block;
  float: left;
  margin: 15px 0 0 5px;
}

.post {
  width: 269px;
  height: 312px;
  float: left;
  background: url(image-demo-2011/post_bg.gif) top left no-repeat;
  padding: 15px 28px 0 25px;
  margin: 0 15px 11px 0;
}

.post span {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #0893EF
}

.post h5 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  color: #3E3E3E;
  padding: 8px 0 10px 0;
}

.post p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #6D7072;
  display: block;
  margin: 13px 0;
}

.more {
  display: block;
  margin: 0 0 0 80px;
}


</style>
</head>
<body>
        <div class="current">
          <p>Illum secundum exerci erat plaga illum, enim, venio. Tamen causa ut diam torqueo sagaciter inhibeo si quae exerci lobortis. Appellatio vel hos autem, ludus luptatum mauris ratis jugis interdico. Gilvus consequat abico demoveo lenis validus typicus ut commodo.</p>
        </div>
        <div class="post">
          <span>September 27th</span><br />
          <h5>Name Post 1</h5>
          <p>Illum secundum exerci erat plaga illum, enim, venio. Tamen causa ut diam torqueo sagaciter inhibeo si quae exerci lobortis. Appellatio vel hos autem, ludus luptatum mauris ratis jugis interdico. Gilvus consequat abico demoveo lenis validus typicus ut commodo.</p>
        </div>
        <div class="post">
          <span>September 25th</span><br />
          <h5>Name Post 2</h5>
          <p>Illum secundum exerci erat plaga illum, enim, venio. Tamen causa ut diam torqueo sagaciter inhibeo si quae exerci lobortis. Appellatio vel hos autem, ludus luptatum mauris ratis jugis interdico. Gilvus consequat abico demoveo lenis validus typicus ut commodo.</p>
        </div>
        <div class="post">
          <span>September 23th</span><br />
          <h5>Name Post 3</h5>
          <p>Illum secundum exerci erat plaga illum, enim, venio. Tamen causa ut diam torqueo sagaciter inhibeo si quae exerci lobortis. Appellatio vel hos autem, ludus luptatum mauris ratis jugis interdico. Gilvus consequat abico demoveo lenis validus typicus ut commodo.</p>
        </div>
        <div class="post">
          <span>September 20th</span><br />
          <h5>Name Post 4</h5>
          <p>Illum secundum exerci erat plaga illum, enim, venio. Tamen causa ut diam torqueo sagaciter inhibeo si quae exerci lobortis. Appellatio vel hos autem, ludus luptatum mauris ratis jugis interdico. Gilvus consequat abico demoveo lenis validus typicus ut commodo.</p>

        </div>
      </div>
</body>

</html>








Related examples in the same category

1.Set width for a paragraph
2.p min-width: 500px;
3.p width:40em;
4.p width: 245px;
5.Set width and height for paragraph
6.p line-height: 1em;
7.Set line height of a Paragraph in content section
8.p max-height: 50px;
9.p line-height: 3em;
10.p height: 245px;
11.p line-height: 2.0;
12.Paragraph with different line-height
13.This paragraph is floated left
14.p float:left;
15.p float:right;
16.p float: left;
17.p display:none;
18.p overflow: visible;
19.p overflow: auto;
20.p overflow: scroll;
21.p overflow: hidden;
22.p white-space: nowrap;
23.p white-space: pre;