有什么办法能让两个div并排不换行，用float的话还是会换行

帮我看下这个例子，使用yui的table，运行一下可以看到第一行第一列里图像和文字换行了，我希望的效果是图像和文字能不换行，在一行里。试着把myLongContent变量设为一个短的值如：var myLongContent = "username";他就不换行了。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head>  
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<title>Basic Example</title> 
 
<style type="text/css"> 
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
margin:0;
padding:0;
}/*
My css:
*/
.trader-image {
cursor:pointer;
margin:5px 4px 5px 5px;
overflow:hidden;
float:left;
vertical-align:middle;
width:50px;
height:40px;
}
.trader-content {
background-color: #CCF;
float:left;
}
.trader-container {
border: 1px solid red;
margin-top:3px;
}
.trader-ticker {
clear: both;
}
.flag {
float: left;
}
.username{
float:left;
margin-left: 3px;
}.td-class{
height:50px;
border-color:-moz-use-text-color #CBCBCB -moz-use-text-color -moz-use-text-color;
border-style:none solid none none;
border-width:medium 1px medium medium;
margin:0;
padding:0;
text-align:left;
border-collapse:separate;
border-spacing:0;
}
.leaderboard-strategy-trader-container{
height:100%;
width:100%;
border-style:none solid none none;
text-align:left;
border-collapse:separate;
border-spacing:0;
}
</style> 
 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/fonts/fonts-min.css" /> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/datatable/assets/skins/sam/datatable.css" /> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/dragdrop/dragdrop-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/element/element-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/datasource/datasource-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/datatable/datatable-min.js"></script> 
 
 
<!--begin custom header content for this example--> 
<style type="text/css"> 
/* custom styles for this example */
.yui-skin-sam .yui-dt-liner { white-space:nowrap; } 
</style> 
 
<!--end custom header content for this example--> 
 
</head> 
 
<body class="yui-skin-sam"> 
 
 
<h1>Basic Example</h1> 
 
<div class="exampleIntro"> 
<p>A demonstration of the DataTable's basic feature set.</p> 

</div> 
 
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --> 
 
<div id="basic"></div><script type="text/javascript"> 
var myLongContent = "userrrrrrrrrrrrrrrrrrr" + "rrrrrrrrrrrrrrrsssssddddddddsssssssssssshhhhhhhhhhhhhhhhhhhhhhhhh" + "hhhhhhssssssssssrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr" + "rrrrrrrrrname";
YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.Basic = function() {
        var myColumnDefs = [
            {key:"id", sortable:true, resizeable:true},
            {key:"date", formatter:YAHOO.widget.DataTable.formatDate, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC},resizeable:true},
            {key:"quantity", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true, resizeable:true},
            {key:"amount", formatter:YAHOO.widget.DataTable.formatCurrency, sortable:true, resizeable:true},
            {key:"title", sortable:true, resizeable:true}
        ];
 
        var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.bookorders);
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        myDataSource.responseSchema = {
            fields: ["id","date","quantity","amount","title"]
        };
 
        var myDataTable = new YAHOO.widget.DataTable("basic",
                myColumnDefs, myDataSource, {caption:"DataTable Caption"});
                
        return {
            oDS: myDataSource,
            oDT: myDataTable
        };
    }();
});YAHOO.example.Data = {
    bookorders: [
        {id:'<div class="leaderboard-strategy-trader-container"><div class = "trader-image"><img src="http://www.web20share.com/wp-content/themes/webline/images/sina.gif" width="50px" height="40px"></div><div class= "trader-content"><div class = "trader-container"><div class = "flag"><img src="http://www.web20share.com/wp-content/themes/webline/images/ico-rss.gif" height="12px"></div><div class = "username">'+myLongContent+'</div></div><div class = "trader-ticker">ticker</div></div></div>', date:new Date(1980, 2, 24), quantity:1, amount:4, title:"A Book About Nothing",
        description: "Lorem ipsum dolor sit amet consectetuer Quisque ipsum suscipit Aenean ligula. Accumsan molestie nibh dui orci vitae auctor nec pulvinar ligula elit."},
        {id:"po-0783", date:new Date("January 3, 1983"), quantity:null, amount:12.12345, title:"The Meaning of Life",
        description: "Vestibulum scelerisque wisi adipiscing turpis odio Phasellus euismod id orci tristique. Hendrerit sem dictum volutpat cursus pretium dui vitae tincidunt Vivamus Aenean."},
        {id:"po-0297", date:new Date(1978, 11, 12), quantity:12, amount:1.25, title:"This Book Was Meant to Be Read Aloud",
        description: "Malesuada pellentesque nibh magna nisl tincidunt wisi dui Nam nunc convallis. Adipiscing leo augue Nulla tellus nec eros metus cursus pretium Sed."},
        {id:"po-1482", date:new Date("March 11, 1985"), quantity:6, amount:3.5, title:"Read Me Twice",
        description: "Libero justo pede nibh tincidunt ut tempus metus et Vestibulum vel. Sem justo morbi lacinia dui turpis In Lorem dictumst volutpat cursus."}
    ]
};
</script> 
 
<!--END SOURCE CODE FOR EXAMPLE =============================== --> 

解决方案 »

  1.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    <html> 
    <head>  
        <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
    <title>Basic Example</title> 
     
    <style type="text/css"> 
    /*margin and padding on body element
      can introduce errors in determining
      element position and are not recommended;
      we turn them off as a foundation for YUI
      CSS treatments. */
    body {
        margin:0;
        padding:0;
    }/*
    My css:
    */
    .trader-image {
        cursor:pointer;
        margin:5px 4px 5px 5px;
        overflow:hidden;
        float:left;
        vertical-align:middle;
        width:50px;
        height:40px;
    }
    .trader-content {
        background-color: #CCF;
        float:left;
    width:700px;
    }
    .trader-container {
        border: 1px solid red;
        margin-top:3px;
    }
    .trader-ticker {
        clear: both;
    }
    .flag {
        float: left;
    }
    .username{
        float:left;
        margin-left: 3px;
    }.td-class{
        height:50px;
        border-color:-moz-use-text-color #CBCBCB -moz-use-text-color -moz-use-text-color;
        border-style:none solid none none;
        border-width:medium 1px medium medium;
        margin:0;
        padding:0;
        text-align:left;    
        border-collapse:separate;
        border-spacing:0;    
    }
    .leaderboard-strategy-trader-container{
        height:100%;
        width:100%;
        border-style:none solid none none;
        text-align:left;    
        border-collapse:separate;
        border-spacing:0;    
    }
    </style> 
     
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/fonts/fonts-min.css" /> 
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/datatable/assets/skins/sam/datatable.css" /> 
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/dragdrop/dragdrop-min.js"></script> 
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/element/element-min.js"></script> 
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/datasource/datasource-min.js"></script> 
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/datatable/datatable-min.js"></script> 
     
     
    <!--begin custom header content for this example--> 
    <style type="text/css"> 
    /* custom styles for this example */
    .yui-skin-sam .yui-dt-liner { white-space:nowrap; } 
    </style> 
     
    <!--end custom header content for this example--> 
     
    </head> 
     
    <body class="yui-skin-sam"> 
     
     
    <h1>Basic Example</h1> 
     
    <div class="exampleIntro"> 
        <p>A demonstration of the DataTable's basic feature set.</p> 
                
    </div> 
     
    <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --> 
     
    <div id="basic"></div><script type="text/javascript"> 
    var myLongContent = "userrrrrrrrrrrrrrrrrrr" + "rrrrrrrrrrrrrrrsssssddddddddsssssssssssshhhhhhhhhhhhhhhhhhhhhhhhh" + "hhhhhhssssssssssrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr" + "rrrrrrrrrname";
    YAHOO.util.Event.addListener(window, "load", function() {
        YAHOO.example.Basic = function() {
            var myColumnDefs = [
                {key:"id", sortable:true, resizeable:true},
                {key:"date", formatter:YAHOO.widget.DataTable.formatDate, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC},resizeable:true},
                {key:"quantity", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true, resizeable:true},
                {key:"amount", formatter:YAHOO.widget.DataTable.formatCurrency, sortable:true, resizeable:true},
                {key:"title", sortable:true, resizeable:true}
            ];
     
            var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.bookorders);
            myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
            myDataSource.responseSchema = {
                fields: ["id","date","quantity","amount","title"]
            };
     
            var myDataTable = new YAHOO.widget.DataTable("basic",
                    myColumnDefs, myDataSource, {caption:"DataTable Caption"});
                    
            return {
                oDS: myDataSource,
                oDT: myDataTable
            };
        }();
    });YAHOO.example.Data = {
        bookorders: [
            {id:'<div class="leaderboard-strategy-trader-container"><div class = "trader-image"><img src="http://www.web20share.com/wp-content/themes/webline/images/sina.gif" width="50px" height="40px"></div><div class= "trader-content"><div class = "trader-container"><div class = "flag"><img src="http://www.web20share.com/wp-content/themes/webline/images/ico-rss.gif" height="12px"></div><div class = "username">'+myLongContent+'</div></div><div class = "trader-ticker">ticker</div></div></div>', date:new Date(1980, 2, 24), quantity:1, amount:4, title:"A Book About Nothing",
            description: "Lorem ipsum dolor sit amet consectetuer Quisque ipsum suscipit Aenean ligula. Accumsan molestie nibh dui orci vitae auctor nec pulvinar ligula elit."},
            {id:"po-0783", date:new Date("January 3, 1983"), quantity:null, amount:12.12345, title:"The Meaning of Life",
            description: "Vestibulum scelerisque wisi adipiscing turpis odio Phasellus euismod id orci tristique. Hendrerit sem dictum volutpat cursus pretium dui vitae tincidunt Vivamus Aenean."},
            {id:"po-0297", date:new Date(1978, 11, 12), quantity:12, amount:1.25, title:"This Book Was Meant to Be Read Aloud",
            description: "Malesuada pellentesque nibh magna nisl tincidunt wisi dui Nam nunc convallis. Adipiscing leo augue Nulla tellus nec eros metus cursus pretium Sed."},
            {id:"po-1482", date:new Date("March 11, 1985"), quantity:6, amount:3.5, title:"Read Me Twice",
            description: "Libero justo pede nibh tincidunt ut tempus metus et Vestibulum vel. Sem justo morbi lacinia dui turpis In Lorem dictumst volutpat cursus."}
        ]
    };
    </script> 
     
    </body></html>
      

  2.   

    2楼，不能那么宽，能做到自适应么?
    原先是有宽度的，比如180px，但是碰到很长的字符串就默默地换行了，所以我想能不能自动撑开div的宽度，而不是换行。能根据内容变宽就好了，也许很难做到这么完美吧？
      

  3.   

    样式的问题需要调整。
    但是你的问题就在于如果太宽了撑开后导致
    td里你的2个div不能并排，而非div的float样式不起作用
      

  4.   

    userrrrrrrrrrrrrrrrrrr" + "rrrrrrrrrrrrrrrsssssddddddddsssssssssssshhhhhhhhhhhhhhhhhhhhhhhhh" + "h"  太长了，而且浏览器会认为这个字符串是一整个单词，所以不会断字了 LZ试着用中文或者正常的英文单词替换内容
      

  5.   

    让两个div并排不换行
    只有设置父容器的宽度大于2个div 宽度和
      

  6.   


    <html>
    <head>
    <style>
    /*body*/
    #container { width:900px; margin:0 auto;}
    /*header*/
    #header { height:70px; background:#CCFFCC; margin-bottom:8px;}
    #nav { height:30px; background:#CCFFCC; margin-bottom:8px;} /*main*/
    #maincontent { margin-bottom:8px;}
    #main { float:left; width:664px; height:500px; background:#FFFF99;}
    #side { float:right; width:228px; height:500px; background:#FFCC99;} /*footer*/
    #footer { height:70px; background:#CCFFCC;}

    </style>
    </head>
    <body>

    <div id="container">
    <div id="header">此处显示 id "header" 的内容</div>
    <div id="nav">此处显示 id "nav" 的内容</div>
    <div id="maincontent">
      <div id="main">此处显示 id "main" 的内容</div>
      <div id="side">此处显示 id "side" 的内容</div>
    </div>
    <div id="footer">此处显示 id "footer" 的内容</div>
    </div>
    </body>

    </html>用这个试试，DIV布局.希望对你有用