Як запобігти переосмисленню CSS - asp.net, webmatrix, webmatrix-2

Те, що я намагаюся зробити, - це вміти мати дві колонки у діві. Тож я можу вставити картинку в будь-яку точку і акуратно розмістити текст довгою стороною.

Ось мій html:

<div id="content">
<div id="gallery">
<h1>Gallery</h1>
<div id="container">
<div id="imageleft">
<img src="/images/images/pic1.jpg" width="150px" alt="Image" />
</div>
<div id="imageright">
test
</div>
</div>
<img src="/images/images/pic2.jpg" width="150px" alt="Image" />
<img src="/images/images/pic3.jpg" width="150px" alt="Image" />
<img src="/images/images/pic4.jpg" width="150px" alt="Image" />
</div>
</div>

Ось ідеальний робочий JSFiddle

http://jsfiddle.net/RdyGM/1/

І ось образ того, що я насправді бачу. Фіолетовий шматочок повинен бути на 50% зліва. (Текст "тест" розміщено внизу).

при огляді ви можете бачити, що він отримує свою ширину з іншого місця: @

Як використовувати лише потрібний CSS.

Відповіді:

Що ж, можна зробити дві речі. Загальний підхід полягає в тому, щоб спробувати зробити свій селектор CSS більш конкретним. Так ви можете зробити: #gallery #content #imageleft, а не просто #imageleft, і це повинно застосувати ваше правило. Інший підхід - змінити CSS #imageleft так:

#imageleft{
....
width:50% !important;
....
}

Ви можете використовувати! Важливо, щоб повідомити браузеру, якому CSS визначити пріоритет - це може, а може не допомогти ...

#imageleft {
float:left;
width:50% !important;
background:#c9c;
}

#imageright {
float:right;
width:50%  !important;
background:#9c9;
}

domId.Attributes.Add("property of css", "Your css class name");