Проблема с плавающей точкой и автоматической шириной CSS - PullRequest
Новая
       26

Проблема с плавающей точкой и автоматической шириной CSS

0 голосов
/ 03 сентября 2011

Мой код 

<body>
   <div class="main>
      <div class="left">blah blah </div>
      <div class="right">blah blah </div>
      <div style="clear:both"></div>
   </div>
</body>

CSS часть: 

.main{min-width:1000px}
.left{width:400px ; height:auto ; float:left }
.right{width:auto ; height:auto ;float:left }

Я динамически вставляю данные в «правый» div, и когда его ширина превышает 600px, он опускается в левый div. Но вместо этого я хочу горизонтальную полосу прокрутки для просмотра содержимого. Одним из решений может быть удаление «float: left» из правого div. Но все же это вызывает проблемы.

Ответы [ 2 ]

0 голосов
/ 27 января 2013

Я предлагаю вам использовать свойство "word-wrap" css. Смотрите здесь . Но если вы все еще хотите сохранить свой путь, вы можете использовать свойства max-width: 600px; и overflow: auto; css для вашего правильного div. Я предполагаю, что это будет работать.

0 голосов
/ 03 сентября 2011

Хм, не имеет смысла макет, который вы только что представили, по ряду причин, но это ваш сайт, поэтому у вас, вероятно, есть свои причины.Но с учетом этого контекста все, что вам нужно сделать, это:

Текучий макет всегда лучше, даже если вы используете фиксированный div в качестве оболочки. 

.left{
width:40% ; 
float:left ; 
}

.right{ 
width:60% ;
overflow : scroll ;
}

Но вы должны бытьточнее, я не совсем понимаю, чего вы пытаетесь достичь, но это, вероятно, решит вашу проблему.И помните, что если вы используете плавные поля ширины, отступы и границы могут испортить ваш макет.Но это другая история.

РЕДАКТИРОВАТЬ:Видите, я в первый раз не понял, чего пытались достичь, вы, вероятно, искали: "Обивка с трюком с отрицательным полем", чтобы получить все на одной высоте: 

 .main{overflow:hidden}
 .left{
    width:40% ; 
    float:left ; 
    padding-bottom : 1000px ; 
    margin-bottom : -1000px;
    }

    .right{ 
    width:60% ;
    float:left ;
    padding-bottom : 1000px ; 
    margin-bottom : -1000px; 
    }
...