Рестайлинг веб-сайта для перемещения контента вокруг боковой панели

Я пытаюсь написать стиль пользователя для переформатирования другого веб-сайта (нет шансов изменить HTML).

В настоящее время сайт имеет основной контент слева с полноразмерной боковой панелью на RHS.

Я использовал CSS для удаления большей части содержимого боковой панели и теперь хотел бы, чтобы основной контент расширялся, чтобы заполнить ширину области под боковой панелью.

Если бы у меня был контроль над источником HTML, я бы сначала поместил боковую панель с "float: right" в стиле, но у меня нет контроля над источником, а боковая панель Div - после основного содержимого.

Традиционно это не может быть сделано в CSS, но можно ли это сделать сейчас с помощью CSS3? и если да, то как?

Страницы, которые я на самом деле пытаюсь стилизовать, являются страницами форума TripAdvisor, такими как эта, но их слишком сложно использовать в качестве примера, поэтому я создал эту очень простую веб-страницу для игры:

<!DOCTYPE html>
<html>
<head>
<style>
#mainbody {border: 2px solid blue;  
        width: 600px;}
#sidebar {border: 2px solid green;  
        position: inherit;
        float: right;
        width: 250px;}
#content {  
        position: inherit;
        width: 550px;}
</style>
</head>
<body>
<div id=mainbody>

<div id=content>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. </p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.</p> 
</div>

<div id=sidebar>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. </p>
</div>
</div>

</body>
</html>}

С боковой панели над содержанием я получаю желаемый формат

Источник

1 ответ

Используя jQuery, вы можете сделать это:

$("#content").insertAfter("#sidebar");

http://jsbin.com/juvoc/1/edit

Источник
Другие вопросы по тегам