Html 仅将图像与其直接父div左对齐或展开_Html_Css

Html 仅将图像与其直接父div左对齐或展开

html css

Html 仅将图像与其直接父div左对齐或展开,html,css,Html,Css,我有一个div“container”，它保存了我的所有内容，并设置为80%宽度。在该分区内，我有一个分区“tophead”，其中包含一个徽标和一个导航条，位于100%（但它只到达父分区的80%）。然后我有了“maincont”，它位于“container”div中，有一个图像。我希望这个图像与“container”div的侧面保持左对齐，这样仍然有20%的空间是打开的。如果我向左浮动或向左对齐，它会显示在屏幕左侧的20%id上，就像空白一样。任何关于如何解决这个问题的想法都将不胜感激如果有人能

我有一个div“container”，它保存了我的所有内容，并设置为80%宽度。在该分区内，我有一个分区“tophead”，其中包含一个徽标和一个导航条，位于100%（但它只到达父分区的80%）。然后我有了“maincont”，它位于“container”div中，有一个图像。我希望这个图像与“container”div的侧面保持左对齐，这样仍然有20%的空间是打开的。如果我向左浮动或向左对齐，它会显示在屏幕左侧的20%id上，就像空白一样。任何关于如何解决这个问题的想法都将不胜感激

如果有人能找出图像与导航栏重叠的原因，那就额外感谢你

jsFiddle：

代码：

不确定这能在多大程度上解决您的问题，但这只是一个开始：

在div声明中使用align属性被认为是错误的形式。你有一个迷路的人。不确定为什么要将图像和主容器强制设置为100%高度

HTML

去除

#maincont img

选择器中的

float:left

，可以解决第一个问题

问题2是由于您的topheader为20%，导航条与此重叠。。您可以通过取消顶部和底部大小固定的规定来解决此问题。

首先，我感谢您的回复。我和昨天一样对html和css都是新手，所以请随时指出我的错误，如果它们看起来很愚蠢，我会提前道歉。我在图像上使用百分比，因为它们是大文件。我被告知该网站可能用于HDTV，因此我认为最好将标题保持在20%，并将图像放在其中，保持在20%的100%，这样，如果它在计算机屏幕上，它看起来会很小，但在电视上的缩放效果很好。坏主意？我使用了align属性，因为我无法使内容居中。更好的方法是什么？不用担心，到目前为止，您在HTML/CSS方面做得很好。在任何语法中找到最佳实践都需要一段时间。如果我去掉左边的浮点数，图像将居中，因为（正如上面的帖子所指出的）我在div标记中使用了一个错误的形式align=center。我这样做是为了使内容居中，因为我想不出任何其他方法使其居中。如果只对一个div（tophead）进行居中，而不对其他div中的其他内容进行居中，那么更好的方法是什么呢？左侧浮动不会对我来说使图像居中……当我删除float:left规则时，它是左对齐的。

<!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>

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;
}

<!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>

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;
}