오른쪽 div에 텍스트 줄 바꿈이 없음

한 컨테이너에는 2 개의 div가 있지만 브라우저 크기를 조정하면 오른쪽 div가 조정 된 브라우저 크기를 수정하기 위해 텍스트를 줄 바꿈하지 않습니다. 텍스트를 줄 바꿈하려면 어떻게해야합니까? 당신의 #container가 498px에서와 주신 때문에오른쪽 div에 텍스트 줄 바꿈이 없음

는

here is a fiddle

#container { 
    width: 498px; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-left: -150px; /* Half of width */ 
    margin-top: -50px; /* Half of height */ 
    word-wrap: break-word; 
    overflow: visible; 
    padding-left:10px; 
} 

.left { 
    float: left; 
    width: 200px; 
    text-align:left; 
    word-wrap:break-word; 
} 

.right { 
    float: right; 
    width: auto; 
    text-align:left; 
    position:relative; 
    word-wrap: break-word; 
    overflow: auto; 
} 
</style> 
</head> 

<body> 
<div id="container"> 
<div class="left"> 
<h3>For Students</h3> 
    &#8226;&nbsp;&nbsp;<a href="#savings-ambassador">Savings Ambassador</a><br> 
    &#8226;&nbsp;&nbsp;<a href="#appointment-coordinator">Appointment Coordinator</a><br> 
    &#8226;&nbsp;&nbsp;<a href="#savings-guru">Savings Guru</a> 
    </div> 
<div class="right"> 
<h3>For Graduates</h3> 
    &#8226;&nbsp;&nbsp;<a href="#director">Director, User Acquisition and Campus Events</a><br> 
    &#8226;&nbsp;&nbsp;<a href="#receptionist">Receptionist/PA</a> 
    </div> 
</div>

출처

2014-01-15 Bruce

문제는

.right { 
     /* ... */ 
     width:auto; 
     /* ... */ 
}

입니다. 따라서 .left{width} + .right{width}이 498px보다 크면 레이아웃이 깨집니다.

여기에 너비가 290px 인 바이올린이 있습니다. (당신은 할 수 298px) 또한 오른쪽. 왼쪽으로 떠올리게 수 있습니다. (이전 버전의 브라우저에서 일을 wan't 바로 float를 ..)

http://jsfiddle.net/R8fXQ/1/

출처

2014-01-15 10:26:19 caramba

나는 http://jsfiddle.net/R8fXQ/1/을 보았고 브라우저 크기를 조정해도 텍스트가 여전히 올바른 div로 감싸지 않는다는 것을 알았습니다. – Bruce

맑은 사용

다음 플로트 속성을 사용하고 오른쪽

사용에 하나 개의 컨테이너를 떠 재산을 모두 margin-right 속성

패딩 속성을 사용하여 컨테이너가 서로 만날 수있게하고 텍스트 줄 바꿈 속성을 사용하여 일반으로 설정하면 괜찮습니다.

출처

2014-01-15 10:29:47 Favouronu

이 코드를 생성하십시오. 복사/붙여 넣기 가능) – Bruce

오른쪽 div에 텍스트 줄 바꿈이 없음

답변

관련 문제