‹‹ 上一主题 | 下一主题 ››
发新话题
打印

[CSS] 2009年10月12日作业：如何实现内容块不换行？

豆猫

版主

Rank: 7Rank: 7Rank: 7

积分
1422 
超能力
0 瓦 
在线时间
111 小时 
注册时间
2008-11-6 

神秘人

1# 大 中 小 发表于 2009-10-12 15:09  只看该作者

2009年10月12日作业：如何实现内容块不换行？

此题原形出自csdn
---------------------------------------------------------------------------
想做到让最外边的 div.wrap 内部不论有多少div（宽/高为100px，1px的边框）都不换行，并且撑开div.wrap，请问有什么办法？
就是说实现下面的效果：
■■■■■■■■■■■■■■■■...........
不要以下，这样就不行了。
■■■■■■■■■■
■■■■■■

要求兼容性：ie6/7/8，ff3，opera 9+
复制内容到剪贴板
代码:
<div class="wrap2">
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <!--div是不定数量的-->
</div>
提示：CSS 2.1 中 display有很多值。

答案：
本帖隐藏的内容需要回复才可以浏览


[ 本帖最后由 豆猫 于 2009-10-20 16:04 编辑 ]
=^^=

TOP

命若琴弦

注册会员

Rank: 2

积分
51 
超能力
0 瓦 
在线时间
3 小时 
注册时间
2009-10-13 
2# 大 中 小 发表于 2009-10-13 10:28  只看该作者

交作业

交作业
复制内容到剪贴板
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.warp {
        white-space:nowrap;
}
.ex {
        margin:3px;
        display:inline-block;
}
.inline {
        *display:inline;
}
p {
        width:100px;
        height:100px;
        border:1px #999999 solid;
        background-color:#990033;
        white-space:normal;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
<div class="warp">
        <div class="ex inline"><p>div的内容要换行。</p></div>
        <div class="ex inline"><p>div的内容要换行。</p></div>
        <div class="ex inline"><p>div的内容要换行。</p></div>
        <div class="ex inline"><p>div的内容要换行。</p></div>
        <div class="ex inline"><p>div的内容要换行。</p></div>
        <div class="ex inline"><p>div的内容要换行。</p></div>
        <div class="ex inline"><p>div的内容要换行。</p></div>
        <div class="ex inline"><p>div的内容要换行。</p></div>
        <div class="ex inline"><p>div的内容要换行。</p></div>
        <div class="ex inline"><p>div的内容要换行。</p></div>
        <div class="ex inline"><p>div的内容要换行。</p></div>
        <div class="ex inline"><p>div的内容要换行。</p></div>
        <div class="ex inline"><p>div的内容要换行。</p></div>
        <div class="ex inline"><p>div的内容要换行。</p></div>
        <div class="ex inline"><p>div的内容要换行。</p></div>
        <div class="ex inline"><p>div的内容要换行。</p></div>
        <div class="ex inline"><p>div的内容要换行。</p></div>
        <div class="ex inline"><p>div的内容要换行。</p></div>
        <div class="ex inline"><p>div的内容要换行。</p></div>
        <div class="ex inline"><p>div的内容要换行。</p></div>
        <div class="ex inline"><p>div的内容要换行。</p></div>
        <div class="ex inline"><p>div的内容要换行。</p></div>
        <div class="ex inline"><p>div的内容要换行。</p></div>
        <div class="ex inline"><p>div的内容要换行。</p></div>
        <div class="ex inline"><p>div的内容要换行。</p></div>
        <div class="ex inline"><p>div的内容要换行。</p></div>
        <div class="ex inline"><p>div的内容要换行。</p></div>
        <div class="ex inline"><p>div的内容要换行。</p></div>
        <div class="ex inline"><p>div的内容要换行。</p></div>
        <div class="ex inline"><p>div的内容要换行。</p></div>
        <div class="ex inline"><p>div的内容要换行。</p></div>
        <div class="ex inline"><p>div的内容要换行。</p></div>
        <div class="ex inline"><p>div的内容要换行。</p></div>
        <div class="ex inline"><p>div的内容要换行。</p></div>
        <div class="ex inline"><p>div的内容要换行。</p></div>
</div>
</body>
</html>

TOP

‹‹ 上一主题 | 下一主题 ››
发新话题