Question

您好我有一个关于在父div中居中框架div的问题。我想将框架置于页面内部，这是70％宽，但我不能让它工作。我喜欢框架在父div WRAP和MAINWRAPPER内的WRAP div（70％宽）。

请帮助：）

＆＃13;

html{ 
		background-color:#EEE;
		font-family: 'Lato',Calibri,Arial,sans-serif;
		font-size:16px;
		color:#888;}
body{
		position:absolute;
		width:100%;	
		margin:0px;
		padding:0px;
}
#MAINWRAPPER {
		min-height:100%;
		position:absolute;
		right: 0;
    	left: 0;
    	margin:0 auto;
		padding:0;
		width:70%; /* page width */	
        background-color: #39f;
        border:1px solid #959595;
        }
#WRAP {
        position:relative;
		display:block;
		margin:0 auto;
        border:1px solid red;
}
.frame {
        width:100%;
        height:300px;
		position:relative;
		float:left;
		background-color:#fff;
		display:block;
		border:1px solid #959595;
		border-radius:4px;
		text-align:center;
		margin:2%;
}	
.frame a{
		display:block;
		width:100%;
		height:100%;
		color:#333;
		}		
.frame a:hover{
		display:block;
		color:#FFF;
	}
.title {
		display:block;
		position:absolute;
		overflow:hidden;
		top:0;
		background-color:#ccc;
		padding:3px 0;
		width:100%;
		height:auto;
		border-bottom:1px solid #959595;}
		
div.price {
	display: block;
	position: absolute;
	bottom: 1px;
	right: 0;
	height: 1.6em;
	width: 3em;
	background-color: #33CCFF;
	border-radius:5px;
	border:2px solid #FFF;
	color:#FFF;
	font-size:1.2em;
	font-weight:bold;
	text-align:center;
}

＆＃13;

<body>
<div id="MAINWRAPPER">
    <div id="WRAP">
  <div class="frame"><a href="#">
  <object class="title">TITLE</object></a><div class="price">50</div></div>
</div>
</div>
</div>    
</body>

＆＃13;

Answer 1

从width and float移除.frame并尝试以下操作： Demo

.frame {
    height:300px;
    position:relative;
    background-color:#fff;
    display:block;
    border:1px solid #959595;
    border-radius:4px;
    text-align:center;
    margin:2%;
}

如何将框架div置于页面容器内

1 个答案: