Могу ли я ограничить ширину элемента относительно его родителя?

<!DOCTYPE html> 
<html lang="en-US"> 
<head> 
    <title>KPMG HTML5 TEST</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" type="text/css" href="m5.css"> 
</head> 
<body> 
    <div class="content"> 
    <header class="header"> 
     <p>testing for responsiveness</p> 
    </header> 
    <div class="nav"> 
     <p>testing for responsiveness</p> 
    </div> 
    <div class="upper_left"> 
     <p>testing for responsiveness</p> 
    </div> 
    <div class="upper_right"> 
     <p>testing for responsiveness</p> 
    </div> 
    <div class="left"> 
     <p>testing for responsiveness</p> 
    </div> 
    <div class="center"> 
     <p>testing for responsiveness</p> 
    </div> 
    <div class="right"> 
     <p>testing for responsivenedddddddddddddddddddddddddddddddsssssssssssssSSSSSSSSss</p> 
    </div> 
    <footer class="footer"> 
     <p>testing for responsiveness</p> 
    </footer> 
    </div> 
</body> 
</html>

Я пытаюсь создать веб-сайт с отзывчивым веб-дизайном. Вот мой файл CSS.Могу ли я ограничить ширину элемента относительно его родителя?

*{ 
    box-sizing: border-box; 
} 
.content{ 
    width:67.625%; 
    position: relative; 
} 
.upper_left,.left{ 
    float:left; 
} 
.upper_right,.center, .right{ 
    float:left; 
    margin-left: 1.663586%; /*18px*/ 
} 

.upper_left{ 
    width:74.5841%; 
} 
.upper_right{ 
    width:23.752311%; 
} 
.left{ 
    width:23.752311%; 
} 
.center{ 
    width:49.168207%; 
} 
.right{ 
    width:23.752311%; 
    position: relative; 
}

Поскольку я хочу создать сайт с шириной 67.625% только (1082px из 1600), я хочу, пункт на сНе права перейти на следующую строку, если она превышает ширину 23.752% содержания (67,652% от монитор). Я попытался сделать позицию класса контента и относительного класса класса, но он не работает. Можно ли это решить?

источник

2015-06-23 Ken Kwok

Там нет необходимости в относительном положении на .right классе. Я думаю, что у вас другая проблема, не зная об этом (слово-перерыв), но не могу сказать без скрипки. Отправьте скрипку, и люди будут ahppy, чтобы помочь – Tom

Я пробовал иметь родственник на .right и без родственника на .right. Это не имеет значения. Вот jsfiddle. https://jsfiddle.net/001rmwjc/4/ Надеюсь, что он работает –

Вы должны добавить слово-break: break-all; к классу .right.

Как это:

*{ 
 
    box-sizing: border-box; 
 
} 
 
.content{ 
 
background:#eee; 
 
    width:67.625%; 
 
    position: relative; 
 
} 
 
.upper_left,.left{ 
 
    float:left; 
 
\t background:#ddd; 
 
} 
 
.upper_right,.center, .right{ 
 
    float:left; 
 
    margin-left: 1.663586%; /*18px*/ 
 
\t background:#ccc; 
 
} 
 

 
.upper_left{ 
 
    width:74.5841%; 
 
} 
 
.upper_right{ 
 
    width:23.752311%; 
 
} 
 
.left{ 
 
    width:23.752311%; 
 
} 
 
.center{ 
 
    width:49.168207%; 
 
} 
 
.right{ 
 
    width:23.752311%; 
 
    position: relative; 
 
    word-break: break-all; 
 
}

<!DOCTYPE html> 
 
<html lang="en-US"> 
 
<head> 
 
    <title>KPMG HTML5 TEST</title> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    
 
</head> 
 
<body> 
 
    <div class="content"> 
 
    <header class="header"> 
 
     <p>testing for responsiveness</p> 
 
    </header> 
 
    <div class="nav"> 
 
     <p>testing for responsiveness</p> 
 
    </div> 
 
    <div class="upper_left"> 
 
     <p>testing for responsiveness</p> 
 
    </div> 
 
    <div class="upper_right"> 
 
     <p>testing for responsiveness</p> 
 
    </div> 
 
    <div class="left"> 
 
     <p>testing for responsiveness</p> 
 
    </div> 
 
    <div class="center"> 
 
     <p>testing for responsiveness</p> 
 
    </div> 
 
    <div class="right"> 
 
     <p>testing for responsivenedddddddddddddddddddddddddddddddsssssssssssssSSSSSSSSss</p> 
 
    </div> 
 
    <footer class="footer"> 
 
     <p>testing for responsiveness</p> 
 
    </footer> 
 
    </div> 
 
</body> 
 
</html>

источник

2015-06-23 09:24:14

Благодарим за внимание. Речь идет только о длине этого, но только о проблеме ширины div. –

Что вы хотите - очень просто. Прежде всего, скажем, вы хотите, чтобы он переместился на следующую строку текста, если это, возможно, 50% от ширины родительского элемента. Вы использовали бы свойство max-width в CSS. Вот пример:

HTML 
---------- 
<div id="parent"> 
    <div id="child"> 
     This text will eventually overflow. 
    </div> 
</div> 

CSS 
---------- 
#parent { 
    width: 500px; 
    height: 100px; 
    background-color: red; 
} 
#child { 
    max-width: 50%; /* 50% is the width used for the example */ 
}

Так как вы можете видеть max-width может добиться этого для вас. Если вы хотите, чтобы я разместил JSFiddle для вас.

источник

2015-06-23 09:17:32

На самом деле, я хочу, чтобы левый центр и правый выравнивались, а когда содержание в правом классе превышает 23.752311% класса содержимого, оно перемещается в следующую строку. Я попытался установить max-width, но это не сработало. Было бы неплохо, если бы вы могли опубликовать JSFiddle для меня. –

Хм, я не уверен, можно ли это сделать просто с CSS. Если вы хотите, чтобы это событие произошло, когда контент превышает родителя, я уверен, что вам понадобится javascript. Здесь будет JSFiddle (http://jsfiddle.net/de4j760q/2/), чтобы это было, хотя :) –

Спасибо. Это касается только длины этого слова. –

Могу ли я ограничить ширину элемента относительно его родителя?

ответ

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