使用html和css对齐div的问题

时间：2011-05-20 07:44:35

标签： html css

即时开始使用css，我在页面中对齐图像和块时遇到问题。

这是我的html来源：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta HTTP-EQUIV="Pragma" CONTENT="no-cache"/>
    <title>Title</title>
    <link href="resources/css/style.css" rel="stylesheet" type="text/css" media="screen" />
  </head>
  <body>
    <div id="wrapper">
      <div id="header-menu">
        <img id="barleft" src="resources/images/barleft.png" alt=""/>
        <div id="header-content">
          <div id="menu">
            <div id="logo">
              <img id="imgLogo" src="resources/images/logoPINFTyny.png" alt="PINF"/>
            </div>
            <div id="search"></div>
            <ul>
              <li class="current_page_item"><a href="index.html">/home</a></li>
              <li><a href="index.html">/usr</a></li>
              <li><a href="index.html">/etc</a></li>
            </ul>
          </div>
        </div>
        <img id="barright" src="resources/images/barright.png" alt=""/>
        <div style="clear:both;"></div>
      </div>
      <!-- end #header -->
      <div id="page">
        <div id="left-sidebar">
          <div id="actions">
            <h3>
              Acciones
            </h3>
            <ul>
              <li>accion1</li>
              <li>accion2</li>
              <li>accion3</li>
              <li>accion4</li>
            </ul>
          </div>
          <div id="news">
            <h3>
              Noticias
            </h3>
            <ul>
              <li>Noticia1</li>
              <li>Noticia2</li>
              <li>Noticia3</li>
              <li>Noticia4</li>
            </ul>
          </div>
        </div>
        <div id="content">
          <h1>
            Este es el titulo el content
          </h1>
          <h3>
            Este es el subtítulo del content
          </h3>
          <p>
            Esto es lo que debe ir escrito en el content<br/>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit. Nullam ante orci, pellentesque eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat, nulla. Sed ac leo. Pellentesque imperdiet.
          </p>
        </div>
        <div id="right-sidebar">
          <div id="actions">
            <h3>
              Acciones
            </h3>
            <ul>
              <li>accion1</li>
              <li>accion2</li>
              <li>accion3</li>
              <li>accion4</li>
            </ul>
          </div>
          <div id="news">
            <h3>
              Noticias
            </h3>
            <ul>
              <li>Noticia1</li>
              <li>Noticia2</li>
              <li>Noticia3</li>
              <li>Noticia4</li>
          </ul>
          </div>
        </div>
      </div>
      <!-- end #page -->
    </div>
    <div style="clear:both;"></div>
    <div id="footer">
      <p>© 2011 Todos los derechos reservados. Sistema diseñado y desarrollado por <a href="http://www.css.com"><img id="logoFooter" src="resources/images/logo-SIR-trans.png" alt="SIR" width="30px" height="30px"/>Sistemas Integrales Roraima</a></p>
    </div>
    <!-- end #footer -->
  </body>
</html>

这是我的css：

body {
    margin: 0;
    padding: 0;
    /*
    background: #F7F7F7 url(../images/img01.jpg) repeat left top;
    font-family: Georgia, "Times New Roman", Times, serif;
    */
    font-family: Verdana, Arial, Helvetica, sans-serif;c
    font-size: 14px;
    /*color: #5A554E;*/
}

div {
    display: block;
}

h1, h2, h3 {
    margin: 0;
    padding: 0;
    font-weight: normal;
    /*color: #32639A;*/
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

h1 {
    font-size:  2.4em;
    font-weight: 600;
}

h2 {
    font-size: 2em;
}

h3 {
    font-size: 1.6em;
}

p, ul, ol {
    margin-top: 0;
    /*line-height: 200%;*/
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

ul, ol {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

a {
    text-decoration: underline;
    color: #516C00;
}

a:hover {
    text-decoration: none;
}

#wrapper {
    margin: 0px;
    padding: 0px;
    /*background: url(../images/img02.jpg) repeat-x left top;*/
}

/* Header */

#header-menu {
    width: auto;
    height: 50px;
    padding: 0px;
    display: block;
    /*background: url(../images/usb.jpg);*/
}

#barleft {
    float:left;
    top: 0px;
    left: 0px;
}

#header-content {
    margin: 0px 30px 0px 0px;
    /*padding: 0px 30px 0px 30px;*/
    position: relative;
    left: 30px;
    right: 30px;
    height:50px;
    background-color: black;
}

#header-content #search {
    width:auto;
    height:auto;
}

#header-content #menu {
   position: relative;
   right:30px;
   top: 0px;
}

#header-content ul {
    height: 50px;
    width: auto;
/*    line-height: 100%;*/
    float: right;
    clear:none;
}

#barright {
    float:right;
    top: 0px;
    right: 0px;
}

/* Logo */

#logo {
    width: 250px;
    height: 50px;
    margin: 0px;
    padding: 0px 0px 0px 0px;
    color: #000000;
    float:left;
}


/* Menu */

#menu {
    width: auto;
    height: 50px;
    margin: 0 auto;
    padding: 0;
    display: block;    
    /*background: url(../images/inter-top-body.png) repeat left top;*/
}

#menu li {
    display: inline;
}

#menu a:hover, #menu .current_page_item a {
    text-decoration: none;
}

#menu .current_page_item a {
    background: url(../images/img06.jpg) no-repeat left top;
    padding-left: 0;
    color: #493E2B;
}

/* Page */

#page {
    width: 1024px;
    padding: 0px 0px 0px 0px;
    background: #FFFFFF;
    display: inline-block;
}

/* Content */

#content {
    width: 736px;
    padding: 0px 0px 0px 0px;
    display: block;
}


/* Sidebar */

#left-sidebar {
    float: left;
    width: 256px;
    padding: 0px;
    color: #787878;
    display: block;
}

#right-sidebar {
    float: right;
    width: 256px;
    padding: 0px;
    color: #787878;
    display: block;
}

/* Footer */

#footer {
    clear: both;
    width: 1024px;
    height: 50px;
    margin: 0 auto;
    padding: 0px 0px 0px 0px;
    background: url(../images/img15.jpg) no-repeat left top;
    font-size: 12px;
    color: #887450;
    height: 50px;
    margin: 0 auto;
    padding: 0px 0 15px 0;
    font-family: Arial, Helvetica, sans-serif;
}

#footer p {
    text-align:center;
}
事实是，我的标题菜单栏与我放在两个极端以消除角落的图像不对齐......“页面”部分似乎也是如此。左侧边栏，内容和右侧边栏与我以为我所做的不同。继承人截图：

screenshot

请注意右边的黑色小块可以与黑色条纹一致，并且黑色条纹应该在左上方之前结束30px，这样小块就可以放在那里。页面部分似乎发生了类似的事情......

我很失落，因为我只是在学习CSS ...希望你能帮助我

谢谢！

2 个答案:

答案 0 :(得分：1)

我会在您的CSS中将条形左侧和条形右侧图像设置为背景图像，而不是在您的html中。

所以请替换下面的图片：

<div id="header-menu">

<div id="left-corner"></div>

/* YOUR CONTENT HERE */

<div id="left-corner"></div>

</div><!-- end #header-menu -->

然后你的css：

#header-menu {
position:relative;
}
#left-corner {
background: url(example-image.jpg) bottom left no-repeat;
position:absolute;
bottom:0;
left:0;
width:30px;
}
#right-corner {
background: url(example-image.jpg) bottom right no-repeat;
position:absolute;
bottom:0;
right:0;
width:30px;
}

答案 1 :(得分：1)

你可以通过这样做来修复你的主要布局，这不是最佳实践，但它有效; 

#page {
    width: 1024px;
    padding: 0px 0px 0px 0px;
    background: #FFFFFF;
    display: inline-block;
}
#page #content, #page #right-sidebar{
    vertical-align: top
}
/* Content */

#content {

    padding: 0px 0px 0px 0px;
    display: table-cell; //this will give the element some propetys that that make them wanna share horizontal space ( must have a parent with "display: table;" to work )
}


/* Sidebar */

#left-sidebar {
    float: left;
    width: 256px;
    padding: 0px;
    color: #787878;
    display: block;
}

#right-sidebar {
    width: 256px;
    padding: 0px;
    color: #787878;
    display: table-cell;
}

我还在您的内容中移动了您的左侧边栏（同时保留所有css attrebutes）

<div id="content">
<div id="left-sidebar">
  <div id="actions">
    <h3>
      Acciones
    </h3>
    <ul>
      <li>accion1</li>
      <li>accion2</li>
      <li>accion3</li>
      <li>accion4</li>
    </ul>
  </div>
  <div id="news">
    <h3>
      Noticias
    </h3>
    <ul>
      <li>Noticia1</li>
      <li>Noticia2</li>
      <li>Noticia3</li>
      <li>Noticia4</li>
    </ul>
  </div>
</div>
  <h1>
    Este es el titulo el content
  </h1>
  <h3>
    Este es el subtítulo del content
  </h3>
  <p>
    Esto es lo que debe ir escrito en el content<br/>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit. Nullam ante orci, pellentesque eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat, nulla. Sed ac leo. Pellentesque imperdiet.
  </p>
</div>

现在，关于标题..您可以通过添加以下来使用css3 :(所有主流浏览器都支持此方法），除了

#header-menu {
-webkit-border-bottom-left-radius: 25px;
-moz-border-radius-bottomleft: 25px;
border-bottom-left-radius: 25px;

-webkit-border-bottom-right-radius: 25px;
-moz-border-radius-bottomright: 25px;
border-bottom-right-radius: 25px;
}

或者您可以使用som background pos。不确定什么brwser不支持这个，但不要认为任何即做（不确定thoe）

background: no-repeat url(../images/barleft.png) left bottom;
background: no-repeat url(../images/barright.png) right bottom;

或者你可以有这样的布局：

<div id="header"><span id="left"></span> your menu <span id="right"></span></div>

宽度样式：

#header{
height: (wished height)
}
#right{
background: no-repeat url(../images/barleft.png) left bottom;
width: (your image width)
}
#left{
background: no-repeat url(../images/barright.png) right bottom;
width: (your image width)
}
相关问题
最新问题