Чрезвычайно простое HTML-форматирование

Я тяну свои волосы сюда. Я просто хочу, чтобы два divs бок о бок содержали контент, который изменяет размер divs и их содержащих divs на основе контента со всем видимым содержимым, без прокрутки.Чрезвычайно простое HTML-форматирование

Следующая разметка не мой сайт, но я написал это, чтобы продемонстрировать то, что я хочу:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Test</title> 

<style> 

#outer{ 
    width:400px; 
} 

#innerleft{ 
    width:200px; 
    float:left; 
} 

#innerright{ 
    width:200px; 
    color:#900; 
    float:left; 
} 

</style> 

</head> 
<body> 

<div id="outer"> 
    <div id="innerleft"> 
     sdgfjfdbvkjfdbvkjfdbvkjdfbvkjdfbvkjdfbvkjdbvkjdfbvkjdfbvkjdfbvkjdfbvkjdfbjkfbvjkdfbdfkjdfbjkfdbkjdfjvfjkbfvbjkfvkjbvbfjdjdfdfbdfj 
    </div> 
    <div id="innerright"> 
     dsufbjksvkudfsvkdfubvjkdfhbvkhdfbvksdbvkjsdbvkjdsbvkjsbdvkjbsdvkjbsdkjvbskjvbsdkjvbskdjbvksdbvksdjvbkjdsbvkjsbvkjsdbvkjdsbvkjdsksbdjv 
    </div> 
</div> 


</body> 
</html>

я, кажется, перепробовал все!

источник

2012-05-01 Adam Waite

Применить word-wrap:

#outer > div 
{ 
    word-wrap: break-word; 
}

http://jsfiddle.net/NEbj7/1/

источник

2012-05-01 15:26:24 Curt

Я никогда не слышал об этом! Благодаря! Я помечаю как можно скорее. –

@AdamWaite Не стоит беспокоиться :) Я предполагаю, что это тестовое содержимое, которое вы используете, и учитывая длину? В будущем вам может быть проще использовать «[Lorem Ipsum] (http://www.lipsum.com/feed/html)» text – Curt

Для того, чтобы автоматически изменить размер вы хотите добавить больше -% процент, чтобы сделать это автоматически заполнять пространство

#outer{ 
    width:100%; /* 100% */ 
} 

#innerleft{ 
    width:50%; /* 50% */ 
    float:left; 
    word-break:break-all; /* Lines may break between any two characters for non-CJK scripts */ 
} 

#innerright{ 
    width:50%; /* 50% */ 
    color:#900; 
    float:left; 
    word-break:break-all; /* Lines may break between any two characters for non-CJK scripts */ 
}

http://jsfiddle.net/eZpvr/1/

источник

2012-05-01 15:30:29

Вы предоставили ссылку на мой jsfiddle? lol – Curt

Opss .. мойbad .. –

Браузеры по умолчанию не будет обертывать текст, который не имеет в нем пробела. Чтобы заставить браузер, чтобы обернуть текст, который вы должны добавить свойство слова-обертывание для #innerleft и #innerright

#innerleft, #innerright{ 
word-wrap: break-word; 
}

ссылка: http://webdesignerwall.com/tutorials/word-wrap-force-text-to-wrap

источник

2012-05-01 15:52:44

Чрезвычайно простое HTML-форматирование

ответ

Смежные вопросы