Текст не останется внутри DIV

Question

Я хочу, чтобы текст оставался в пределах DIV, даже если зритель решает масштабировать текст в своем браузере. Прямо сейчас текст просто выходит за пределы DIV. Я уверен, что у меня может быть какой-то код, пропавший или запутанный.

Вот код:

CSS:

.footer { 
    height: 110px; 
    width: 1024px; 
    background-color: #000000; 
    margin: auto; 
    -webkit-box-shadow: 1px 2px 20px 0 #000000; 
    -moz-box-shadow: 1px 2px 20px 0 #000000; 
    box-shadow: 1px 2px 20px 0 #000000; 
    font-family: 'Jura', serif; 
    font-size: 20px; 
    color: #ffffff; 
} 

HTML:

<div class="footer"> 

    <span style="position:relative;top:15px;left:0px"> 
     <a href="mailto:jamie@diversedesigning.com">jamie@diversedesigning.com</a> 
    </span> 

    <span style="position:relative;top:15px;left:300px"> 
     © 2017 diversedesigning.com 
    </span> 

</div> 

Answer 1

Дайте ему попробовать с абсолютным позиционированием с пролетом и относительным положением родителей дела.

.footer { 
 
height:110px; 
 
width:100%; 
 
background-color:#000000; 
 
margin: auto; 
 
-webkit-box-shadow: 1px 2px 20px 0 #000000; 
 
-moz-box-shadow: 1px 2px 20px 0 #000000; 
 
box-shadow: 1px 2px 20px 0 #000000; 
 
font-family: 'Jura', serif; 
 
font-size: 20px; 
 
color:#ffffff; 
 
position:relative; 
 
} 
 

 
.footer span:first-child 
 
{ 
 
    position:absolute; 
 
    top:15px; 
 
    left:0px 
 
} 
 

 
.footer span:last-child 
 
{ 
 
    position:absolute; 
 
    top:15px; 
 
    right:0px 
 
}

<div class="footer"> 
 

 
<span ><a href="mailto:jamie@diversedesigning.com">jamie@diversedesigning.com</a></span> 
 

 
<span>© 2017 diversedesigning.com</span> 
 

 
</div>

Answer 2

Не слишком уверен, что вы спрашиваете, так я добавил два возможных awnsers

Если вы хотите, чтобы всегда оставаться на экране в DIV

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

HTML

<span style="position:absolute;top:15px;left:5px"><a   href="mailto:jamie@diversedesigning.com">jamie@diversedesigning.com</a></span> 

<span style="position:absolute;top:50px;left:300px">© 2017  diversedesigning.com</span> 

</div> 

CSS

.footer { 
    position:relative; 
    height: 110px; 
    width: 1024px; 
    background-color: #000000; 
    margin: auto; 
    -webkit-box-shadow: 1px 2px 20px 0 #000000; 
    -moz-box-shadow: 1px 2px 20px 0 #000000; 
    box-shadow: 1px 2px 20px 0 #000000; 
    font-family: 'Jura', serif; 
    font-size: 20px; 
    color: #ffffff; 
} 

Текст немного за пределами div?

Я не слишком уверен, почему его клипы края так, но вы можете положить некоторое дополнение в футере DIV, чтобы держать их подальше от краев

Я только что добавили его в свой CSS ниже.

.footer { 
height:110px; 
width:1024px; 
background-color:#000000; 
margin: auto; 
-webkit-box-shadow: 1px 2px 20px 0 #000000; 
-moz-box-shadow: 1px 2px 20px 0 #000000; 
box-shadow: 1px 2px 20px 0 #000000; 
font-family: 'Jura', serif; 
font-size: 20px; 
color:#ffffff; 
padding:15px; 
} 

вы также можете просто изменить левое значение первого диапазона, чтобы держать его подальше от края

<span style="position:relative;top:15px;left:5px"><a href="mailto:jamie@diversedesigning.com">jamie@diversedesigning.com</a></span> 

Надеется все это помогает!

JSFiddle ссылка:https://jsfiddle.net/gaL494yf/