Плавающая справка и замешательство

Моя проблема довольно проста, но у меня все в тупике.Плавающая справка и замешательство

enter image description here

(ПОС RHS проблема!)

У меня есть миниатюра со следующим CSS:

float: none; 
margin-right: 0; 
display: block;

и справа от что у меня есть некоторый текст с следующий CSS:

position: relative; 
text-decoration: none; 
text-indent: 0;

Теперь это отлично работает! Однако, когда пользователь изменяет размер окна, текст перескакивает ниже эскиза, который я не хочу (я использую отзывчивый веб-сайт)! Как я могу предотвратить это, когда текст ведет себя так? Я играл с ним в течение веков и не может решить эту проблему :(.

источник

2013-08-09 user2648040

Есть ли вероятность увидеть HTML и все соответствующие CSS? Минимальное демо на jsfiddle.net или jsbin.com было бы неплохо. –

просто поместите миниатюру в контейнер div и определите свою ширину и большую высоту и поплавьте ее, а затем поместите свой текст влево. – iGanja

As per my understanding, the reason might be: 
There may be some float left given to the thumbnail image somewhere

в стиле, написанные для более низких размеров экрана. Лучший вещь, которую вы можете сделать это, проверить с помощью Firebug или что-то и проверить ли какой-либо поплавок слева дано миниатюрному изображению. Если это так, удалите это, или дать ему в качестве поплавка, как никто.

Если вы нормально с наличием весь текст под изображением, когда на экране изменяется , вы можете использовать clear: как для более низкого размера экрана, которому должен быть предоставлен текстовый div.

Если бы вы смогли дать ссылку для просмотра, будет легко решить настоящую проблему. Надеюсь, мое решение поможет. Спасибо :-)

источник

2013-08-09 04:17:10

Это, кажется, что вы хотите:

<html> 
    <head>  
     <style> 
     img { 
      float: left; 
      width: 40px; 
      height: 40px; 
      border: 1px solid gold; 
      margin-left: 5px; 
     } 
     .text { 
      margin-left: 50px; 
     } 
     .container { 
      width: 150px; 
      border-left: 3px solid red; 
     } 
     </style> 
    </head> 
    <body> 
     <div class="container"> 
     <img> 
     <div class="text">This should stay aligned and not go under the thumbnail.</div> 
     </div> 
    </body> 
</html>

источник

2013-08-09 05:27:25 Carl

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

.box { 
    width: 210px; 
    vertical-align: text-top; 
    display: table-cel 
} 
.box img { 
    float: left; 
    width: 100px; 
    height: 100px; 
} 
.box span.text { 
    float: left; 
    width: 100px; 
    box-sizing: border-box; 
}

Можете ли вы просмотреть пример в jsfiddle: here

источник

2013-08-09 05:55:00 xzegga

Я думаю, что это лучший ответ. Оба элемента должны плавать, так как они не должны мешать друг другу. –

Плавающая справка и замешательство

ответ

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