【问题标题】:Help with div - make div fit the remaining width帮助 div - 使 div 适合剩余的宽度
【发布时间】:2010-10-18 03:22:49
【问题描述】:

我有以下html代码:

<div class="a">
    <div class="b">
        <a href="#">text</a>
    </div>
    <div class="c">
        text
    </div>
</div>


div.a
{
    margin-top: 10px;
    clear: left;
    float: left;
    width: 100%;
    text-align: center;
}

div.b
{
    padding: 27px 10px 7px 10px;
    background-color: #fff;
    overflow: hidden;
    float: left;
}

div.c
{
    float: left;
}

我应该为 div.c 设置什么样式以使其位于 div.b 旁边并适合剩余宽度?

这是一个适合 100% 屏幕的模板。

谢谢!

【问题讨论】:

标签: css


【解决方案1】:

<div class="a">
	<div class="b">
		<a href="#">click here to be amazed!</a>
	</div>
	<div class="c">
		this is some awesome text
	</div>	
</div>

<STYLE>
	.b,.c {
		padding:15px;
	}

	div.a {		
		border: 1px solid red;
	}

	div.b {
		float: left;
		border: 1px solid blue;
	}

	div.c {
		border: 1px solid green;
	}
</STYLE>

【讨论】:

  • 当“b”的内容超过一行时,“c”会自行推到下一行,两者不再并排出现。
  • 原帖指出整个东西的宽度正好是 100%。
猜你喜欢
  • 2016-08-20
  • 2011-12-20
  • 1970-01-01
  • 2013-03-09
  • 2012-09-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-10-23
相关资源
最近更新 更多