Конфликтуют стили max-width и float?

[ilvl]

Добрый вечер, для начала краткий экскурс. Делаю сайты много лет, в основном работал с WYSIWYG софтом и готовыми шаблонами для разных CMS`ов и в верстку никогда особо не лез, работаю уже больше 10 лет и всегда справлялся с любыми задачами, однако время идёт и что бы не деградировать нужно наоборот, развиватся=))) на смену WYSIWYG пришел http://scratchpad.io/на котором я принялся практиковатся в выполнении необходимых мне задач. 

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

 

<style type="text/css">.tablica {  display: table;   width: 100%;   border-spacing: 10px 10px; } .yacheika {  display:inline-block;   padding: 10px;}</style><div class="tablica">  <div class="yacheika"><div <p=""><img style="max-width:100%" src="http://unispot.pro/image/catalog/smartbook600v12.jpg"><br><p></p>

</div>

</div>

  <div class="yacheika"><h1 style="width:400">ЧТО ТАКОЕ СМАРТБУК? </h1>

<p style="width:400">loremipsumblablablaloremipsumblablablaloremipsumblablablaloremipsumblablablaloremipsumblablablaloremipsumblablablaloremipsumblablablaloremipsumblablablaloremipsumblablablaloremipsumblablablaloremipsumblablablaloremipsumblablablaloremipsumblablablaloremipsumblablablaloremipsumblablablaloremipsumblablablaloremipsumblablablaloremipsumblablablaloremipsumblablablaloremipsumblablabla </p>

</div>

</div>

 

 

но столкнулся с тем, что атрибуты стиля(извините, если что не так называю), конфликтят друг с другом, тоесть: если выполняется автоужим картиночки по размеру экрана, то не работает обтекание, а текст располагается или под картинкой или неправильно в строчку после неё, а если работает обтекаемость текстом, то перестаёт работать max-width и картиночка тянет сайт на мобильных. не прошу делать работу за меня, ибо так я ничему не научусь)) прошу сказать правильно ли я понял, что стили конфликтят друг с другом, или нет? И есть ли возможность, всё же сделать, то, что необходимо - понимаю, что есть, но не понимаю логику процесса?!

ещё раз для ясности задача: в одном ряду справа картиночка, слева текст всё это в одном ряду, при ужимании размера экрана, текст прыгает под картиночку и оба эллемента(текст и картиночка ужимаются по правилу style="max-width: 100%;

 

спасибо за внимание!

[alex_web64]

Вы прописываете два атрибута style, поэтому работает только один из них float или max-width

https://jsfiddle.net/1ygo986f/

[Switch74]

не прошу делать работу за меня, ибо так я ничему не научусь )) 

тогда пример в студию

не припомню, чтобы данные свойства как-то конфликтовали

можно использовать inline-block

учтите, что в любом способе есть свои нюансы

возможно вам понадобится @media

[ilvl]

Доброго времени суток, спасибо, что отозвались) вот видео, где наглядно показал в чём проблема:

https://www.youtube.com/watch?v=FNeKKPls7Hc&feature=youtu.be

 

делайте тише, ибо snagit чё-то очень громко записал мой голос

Edited March 3, 2016 by ilvl

[ilvl]

Вы прописываете два атрибута style, поэтому работает только один из них float или max-width

https://jsfiddle.net/1ygo986f/

Спасибо, понял всё исправил: ошибки делал две: писал два style, а даже, когда пробовал один style, то писал style="float:left"; "max-width:100%"

))тоесть использовал отдельные кавычки для float и max-width!

СПАСИБО, очень доступно и вежливо)))

[ilvl]

Добрый день, расклад такой. Вроде всё получилось, НО после того как добавил изображению отступ(margin) при отображении на мобильных снова растягивает сайт - изображение вылазит за ширину сайта справа. Тоесть получается, что max-width изображения не действует на (margin) и несмотря на то, что изображение ужимается из-за широких отступов всё сыпится. Сори, если не понятно объяснил - короче задача сделать так, что б картинка уменшаясь вместе с рамочкой и находилась по центру странички, а то сейчас всё как-то через *** вроде картинка по центру но правый margin вылазит "за сайт". спасибо

Edited March 3, 2016 by ilvl

[Switch74]

посмотрите в инспекторе что такое width и входит ли в него margin

обратитесь к документации и посмотрите на css свойство box-sizing (возможно в будущем оно вам пригодится)

попробуйте использовать padding для родителя img, а не margin для для него

[ilvl]

посмотрите в инспекторе что такое width и входит ли в него margin

обратитесь к документации и посмотрите на css свойство box-sizing (возможно в будущем оно вам пригодится)

попробуйте использовать padding для родителя img, а не margin для для него

Спасибо, всё понял удалось решить проблему и выполнить поставленную задачу, НО, как не удивительно появилась новая проблема.

 

Вот мой код

<div style="overflow: hidden;">    <div style="width: 100%">        <div style="float: left;padding:25px"><img style="max-width:100%; border:1px solid white" src="http://unispot.pro/image/catalog/smartbook600v123.jpg"></div>        <div style="float: left;width:420px ;max-width:100%;padding:30px"><h1>ЧТО ТАКОЕ СМАРТБУК?</h1><p>Smartbook - это универсальные пк-трансформеры, сочетающие в себе компакность плашетных пк и функциональные преимущества полноценных ноутбуков. Такие девайсы идеально подойдут для любых задач и заменят оба устройства ПК и планшетный компьютер, объединив их в себе. Смартбуки построены на самых современных чипсетах, что и позволяет им обеспечивать сверхвысокую производительность при низком энергопотреблении. Ещё одним преимуществом смартбуков является возможность выбора рабочей среды: Android или Windows, а самые новые модели и вовсе предоставляют возможность переключения, при одновременном использовании обоих операционных систем на одном устройстве. UNISPOT.PRO предлагает большой выбор смартбуков для любых задач: широкий диапазон цен и форм-фактора коплектаций позволит Вам выбрать устройство, которое приятно удивит Вас и Ваших друзей.</p></div>    </div></div><style type="text/css">.tablica {  display: table;   width: 100%;   border-spacing: 10px 10px; } .yacheika {  display:inline-block;   padding: 10px; }</style><div align="center" "="" class="tablica">  <div class="yacheika"><div style="width:300px"> <p style="text-align: left; "><img style="border:1px solid white" src="http://unispot.pro/image/catalog/smartbooks/smartbook400(3).jpg"><br></p><figcaption style="text-align: left;">Бюджетные смартбуки для начинающих юзеров, простых повседневных задач, отдыха и работы.</figcaption></div></div>  <div class="yacheika"><div style="width:300px"> <p style="text-align: left;"><img style="border:1px solid white" src="http://unispot.pro/image/catalog/smartbooks/smartbook400(1).jpg"><br></p><figcaption style="text-align: left;">Производительные смартбуки на топовых чипсетах - мощные новинки уже ждут Вас.</figcaption></div></div>  <div class="yacheika"><div style="width:300px"> <p style="text-align: left;"><img style="border:1px solid white" src="http://unispot.pro/image/catalog/smartbooks/smartbook400(2).jpg"><br></p><figcaption style="text-align: left;">Проверенные решения по доступной цене: Идеальный выбор на рынке смартбуков.</figcaption></div></div></div>

Задача сделать так, что б верхний блок (первое большое изображение и текст) сохранив все возложеные на них надежды , отображались по центру страницы, а не слева так как сейчас. Помогите пожалуйста, не могу разобратся, пока-что получается только отцентрировать текст, но это не то что нужно. Нужно что б центрирование текста осталось слева и вообще всё было так же как сейчас, ибо сейчас удалось добится всех поставленных задач и при этом ничего не плывет и не тянет на мобильных и даже наоборот - всё правильно перепрыгивает и ужимается, как только размера для отображения не хватает, но на контупере смотрится плохо потому-что контент слева, а хочется что б он был по-центру. Спасибо.