Question

我有一个div'容器'，它包含我的所有内容，并设置为80％宽度。在div中，我有div'tophead'，其中包含一个标志和一个100％的导航栏（但它只能达到80％的父级）。然后我有'maincont'，它位于'container'div中并且有一个图像。我喜欢这个图像与'容器'div的一侧保持对齐，这样仍有20％的空间可以打开。如果我向左浮动或向左对齐，它会一直显示在屏幕左侧，超过20％id，如空白。任何想法如何解决这个问题将非常感激。

奖励，如果有人能弄清楚图像与我的导航栏重叠的原因。

的jsfiddle： http://jsfiddle.net/4JKus/4/

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="ccoheader.css">
    <title>Hello World</title>
  </head>
  <body>
    <div id="container">
        <div align="center" id="tophead">
        <img src="images/logo.png" alt="logo">
        <ul>
            <li><a href="#" title="About Us">About Us</a></li>
            <li><a href="#" title="Biographies">Biographies</a></li>
            <li><a href="#" title="Services">Services</a></li>
            <li><a href="#" title="Careers">Careers</a></li>
            <li><a href="#" title="Contact">Contact</a></li>
        </ul>
        </div>
        <div align="center" id="maincont">
        <img src="images/secondimage.png" alt="image">
        </div>
    </div>
    </div>
  </body>

CSS：

html, body, #container {
    height: 100%;
    width: 100%;
    margin: 0;

}

#tophead {
    height: 20%;
    width: 80%;
    margin: auto;

}

#tophead img {
    height: 100%;
    width: auto%;
}
#tophead ul {
    list-style: none;
    display: inline-block;
    font-size: 0;

}
#tophead li {
    display: inline-block;

    }
#tophead a {
  background: #2dbaf0;
  color: #fff;
  display: block;
  font-size: 16px;
  font-family: "arial";
  font-weight: bold;
  padding: 0 20px;
  line-height: 38px;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-transition-property: background;
  -webkit-transition-duration: .2s;
  -webkit-transition-timing-function: linear;

}
#tophead a:hover {
  background: #f8a52b;
  color: #fff;
}
#tophead li:first-child a {
  border-left: none;
  border-radius: 5px 0 0 5px;
}
#tophead li:last-child a {
  border-right: none;
  border-radius: 0 5px 5px 0;
}

#maincont {
    height: 68%;
    width: 80%;
    padding-top: 2%;

    }
#maincont img{
    height: 100%;
    width: auto;
    border-radius: 30px;
    float: left;
}

Answer 1

不知道这对解决你的问题有多远，但它是一个开始：

http://jsfiddle.net/4JKus/5/

在div声明中使用align属性被视为错误形式。你有一个流浪/ div闲逛。不确定为什么你强迫你的图像和主容器达到100％的高度。

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="ccoheader.css">
    <title>Hello World</title>
  </head>
  <body>
    <div id="container">
        <div id="tophead">
            <img class="logo" src="images/logo.png" alt="logo">
            <ul>
                <li><a href="#" title="About Us">About Us</a></li>
                <li><a href="#" title="Biographies">Biographies</a></li>
                <li><a href="#" title="Services">Services</a></li>
                <li><a href="#" title="Careers">Careers</a></li>
                <li><a href="#" title="Contact">Contact</a></li>
            </ul>
        </div>
        <div id="maincont">
            <div class="maincont_col1">
                &nbsp;
            </div>
            <div class="maincont_col2">
                <img src="images/secondimage.png" alt="image">
            </div>
        </div>
    </div>
  </body>

CSS

html, body, #container {
    width: 100%;
    margin: 0;
}

#tophead {
    height: 20%;
    width: 80%;
    margin: auto;

}

#tophead img {
    width: auto%;
}
#tophead ul {
    list-style: none;
    display: inline-block;
    font-size: 0;

}
#tophead li {
    display: inline-block;

    }
#tophead a {
  background: #2dbaf0;
  color: #fff;
  display: block;
  font-size: 16px;
  font-family: "arial";
  font-weight: bold;
  padding: 0 20px;
  line-height: 38px;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-transition-property: background;
  -webkit-transition-duration: .2s;
  -webkit-transition-timing-function: linear;

}
#tophead a:hover {
  background: #f8a52b;
  color: #fff;
}
#tophead li:first-child a {
  border-left: none;
  border-radius: 5px 0 0 5px;
}
#tophead li:last-child a {
  border-right: none;
  border-radius: 0 5px 5px 0;
}

#maincont {
    width: 100%;
    padding-top: 2%;
    overflow: hidden;

    }
.maincont_col1{ width:20%; float:left; }
.maincont_col2{ width:80%; float:left; }

#maincont img{
    border-radius: 30px;
}

Answer 2

摆脱float:left选择器中的#maincont img解决了第一个问题。

问题2归结为你有一个20％的topheader并且导航栏与此重叠。你可以通过删除顶部和底部固定大小的规定来解决这个问题。

仅对齐或平放其直接父div左侧的图像

2 个答案: