HTML CSS 반응 형 단락 태그

웹 페이지를 디자인 중이며 거의 끝났습니다. 알아낼 수없는 작은 문제가 있습니다.HTML CSS 반응 형 단락 태그

HTML : 당신이 코드를 실행하면

<html> 

<head> 

    <style> 
     * {margin:0; padding:0; text-indent:0; } 

     .float-box-footer{display:inline-block;position:relative;height:37px;background-color:#accb32;max-width: 860px;width: auto\9;} 

     .p4{font-size: 12pt; color: black; padding-left:5pt; left:0; top:7pt; font-family:National, Arial, sans-serif;position:relative;} 

     .p5{font-size: 7pt; color: black; padding-left:465pt;} 

    </style> 
</head> 

<body> 

<div class='float-box-footer'> 
    <p class="p4">Learn more <a href="http://www.google.com" alt="" >Google.com</a> 
    </p> 

    <p class="p5">© 2016 Google Google of Google. All rights reserved.</p> 
</div> 

</body> 

</html>

그것의 텍스트와 녹색 막대를 표시합니다. 웹 페이지 너비를 현명하게 조정하면 녹색 막대가 웹 페이지와 함께 축소되어 적절한 크기를 유지합니다. 그러나 맨 오른쪽의 텍스트는 그렇게하지 않습니다. 일단 당신이 멀리 가면보기가 꺼지고 포장이 시작됩니다. 녹색 바와 함께 움직일 텍스트가 필요합니다.

나는이 부분에 붙어있어 알아낼 수 없다. 아무도 나를 도와주지 않을 수 있습니까?

은 사전에 감사

출처

2016-07-22 D. Brady

코드를 참조주세요 100 %. 백분율 값은 창에 맞게 조정됩니다.

지금 직면 한 문제는 너비가 .float-box-footer 인 아이들의 내부 요소에 의해 정의되고 있다는 것입니다. .p5의 채우기 값은 녹색 상자를 열어 놓고 있습니다. .float-box-footer에 100 %와 같은 유체 너비 값을 지정하고 text-align: right; 또는 float: right;을 .p5에 던지면 비즈니스에 있어야합니다.

나는 CSS 박스 모델의 기본에 최대 읽기 좋을 것 : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

출처

2016-07-22 16:57:17 cyoung

그렇게 많은 도움이되었습니다. 답변을 주셔서 대단히 감사합니다. 다른 문제는 화면의 특정 지점에 도달하면 왼쪽 단락의 크기를 조정하는 것입니다. 나는 그것을 수행하는 유일한 방법으로 미디어 질의를 보았으나 그 일을하는 것처럼 보일 수는 없다. 크기 조정 문제에 대한 제안 사항이 있습니까? –

당신이 녹색 막대가 브라우저 윈도우의 폭에 대응하려면, 내가 좋아하는 뭔가 .float-box-footer에 폭을 설정합니다

* {margin:0; padding:0; text-indent:0; } 

.float-box-footer{height:37px;background-color:#accb32;max-width: 860px;width: auto\9;} 

.p4{font-size: 12pt; color: black; padding-left:5pt; left:0; top:7pt; font-family:National, Arial, sans-serif;position:relative; width:50%;} 

.p5{font-size: 7pt; color: black; width:50%; text-align:right; float: right;} 


<div class='float-box-footer'> 
    <p class="p4">Learn more <a href="http://www.google.com" alt="" >Google.com</a> 
    </p> 

    <p class="p5">© 2016 Google Google of Google. All rights reserved.</p> 
</div>

출처

2016-07-22 16:51:43 vignesh

<style> 
    * {margin:0; padding:0; text-indent:0; } 

    .float-box-footer{ 
     display:inline-block; 
     position:relative; 
     height:37px; 
     background-color:#accb32; 
     max-width: 860px; 
     width: auto\9; 
     white-space: nowrap; 
     } 

    .p4{ 
     font-size: 12pt; 
     color: black; 
     padding-left:5pt; 
     left:0; top:7pt; 
     font-family:National, Arial, sans-serif; 
     position:relative;} 

    .p5{ 
     font-size: 7pt; 
     color: black; 
     padding-left:465pt;   
     } 

</style>

가 floatboxfooter의 DIV에없는 랩 값이 공백 속성을 추가합니다. 예제에서 floatboxfooter 속성을 확인하십시오. 희망이 도움이됩니다.

출처

2016-07-22 18:47:04

답변

관련 문제