Question

我想编写一个CSS脚本，除了第五个div作为容器外还包含4个div。

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

我有一个脚本作为试用版，但它不像我想要的那样（Iam初学者用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>

Answer 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而不是直接将代码与标记内联。

Answer 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之外还有四个div的CSS样式

2 个答案: