除了容器 DIV 之外还有四个 div 的 CSS 样式答案

【问题标题】：CSS style with four div in addition to the container DIV除了容器 DIV 之外还有四个 div 的 CSS 样式
【发布时间】：2015-10-11 10:10:41
【问题描述】：

我想编写一个 CSS 脚本，其中包含 4 个 div 以及作为容器的第五个 div。

Div 1 应该在顶部作为标题，Div 2 应该在容器右侧的中心，Div 4（包含 img src）应该在容器的中心，Div 3 应该位于图像的底部。

我有一个脚本作为试用版，但它不像我想要的那样（我是 CSS 初学者）。

<html xmlns="http://www.w3.org/1999/html">

<head>
<title>    </title>

<meta charset="utf-8">

<style>

    #siena img {

        display: inline-block;
        margin-left: 0px;

    }

    #Container
    {
        margin-bottom: 3pc;
        text-align: center;
        border-width:2px;
        border-color: #46b8da ;
        margin-right: 100px;
        margin-left: 100px;
        border-style: solid;
        background-color :#c4e3f3;
        padding :10%;


    }
    #link
    {
        display: inline-block;

    }
    #price
    {
        top:100px;
        width:50%
          margin:0 auto;
        float:right;
    }
 </style>
 </head>

  <body>


  <meta charset="utf-8">
  <h1  style="text-align: center;">   Text   </h1>



  <div id="Container"  >  <p>
    <div id="siena" >
     Text 

   <img src='http://www.traidnt.net/vb/attachments/480574d1272729780-no_pic.gif'>
          <div id="price" >
            price 
        </div>


    </div>

    <div id="link" >
        <a href='https://www.google.com/?gws_rd=ssl' > </a>

    </div>
</div>




</body>
</html>

【问题讨论】：

你需要 html 代码和 css 代码才能让它工作，你能告诉我们你到目前为止做了什么吗？
为了帮助您了解哪里出错了，我创建了这个colorcoded jsfiddle。我建议将来为不同的 DIV 添加背景颜色，以便更容易理解/学习如何使用 DIV 和 CSS 进行构建。

标签： html css

【解决方案1】：

您的标记看起来无效。

标签中有不必要的空格和未闭合的p 标签。

你可以通过这个标记实现你想要的：

<div id="container">
    <div id="header">Div 1</div> 
    <div id="content">Div 4</div>
    <div id="side-content">Div 2</div>
    <div id="footer">Div 3</div>
</div>

然后使用CSS定位元素：

#container {
     width: 100%;
}

div {
    border: 1pt solid black;
    padding: 5px;
    text-align: center;
}

#content {
    width: 70%;
    float: left;
}

http://jsfiddle.net/7dqagh7s/

另外，我建议使用 StyleSheet，而不是将代码直接内联到标记中。

【讨论】：

【解决方案2】：

我试图在 css 中复制图像

.container{
  width: 90%;
  border: 1px solid brown;
  height: 500px;
}
.top, .bottom{
  margin-top: 10px;
  width: 90%;
  height: 100px;
  border: 3px solid red;
  margin-bottom: 10px;
}
.left, .right{
  display: inline-block;
  width: 50%;
  border: 3px solid maroon;
  height: 200px;
}
.right{
  display: inline-block;
  width: 40%;
  margin-left: 5%;
}

<div class="container">
		<div class="top"></div>
		<div class="left"></div>
		<div class="right"></div>
		<div class="bottom">bottom</div>
</div>

编辑，因为您询问图像是否与另一个 div 重叠。

以下将使它的图像不会延伸到它的容器之外，因此图像不会与任何其他 div 重叠。

.left img{
   width: 100%;
   max-width: 100%;
   max-height: 100%;
}

这是你的意思吗？

【讨论】：

图片可能与其他 div 重叠，如何避免？
我在答案中添加了一个部分。基本上包括max-width: 100% 到img 以防止img 与另一个div 重叠。有帮助吗？
不错。我也希望顶部 div 上的文本位于底部，右侧 div 上的文本位于其左侧，该怎么做？