Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.50/18: Рейтинг темы: голосов - 18, средняя оценка - 4.50
0 / 0 / 0
Регистрация: 11.04.2015
Сообщений: 11
1

Разнести дивы по противоположным краям

19.05.2015, 16:56. Показов 3560. Ответов 12
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Сразу говорю, поиском пользовался, "похожие темы" читал. Стоит задача разнести дивы нефиксированной ширины по разным краям в одну строку: один по левому, другой по правому краю. При этом ссылки не должны перекрываться, сразу говорю, задать ссылкам position я не могу. Причем обтекание и манипуляции с позиционированием по вертикали тоже не подходит, категорически.

Добавлено через 9 минут
Либо по другому: как сделать так, чтобы выровненный float элемент не выезжал на следующий блок.
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
19.05.2015, 16:56
Ответы с готовыми решениями:

В массив B скопировать элементы массива А с противоположным знаком
Из массива А(10) состоящего из 40 вещественных знаков получить массив В, в который войдут все...

Подсчитать количество соседних пар элементов с противоположным значением
Даны 30 чисел в интервале от -20 до 20. Подсчитать количество соседних пар элементов с...

Вычисление площади прямоугольника по двум диагонально противоположным точкам
Приветствую друзья. Прошу оказать помощи. Требуется переделать код... на "организуйте вычисление...

Каждый отрицательный элемент одномерного массива заменить противоположным по значению элементом
Разработать рекурсивную функцию не возвращающую значение, которая каждый отрицательный элемент...

12
153 / 126 / 39
Регистрация: 02.05.2012
Сообщений: 573
19.05.2015, 17:08 2
Лучший ответ Сообщение было отмечено Asmovr как решение

Решение

Asmovr,
Цитата Сообщение от Asmovr Посмотреть сообщение
Причем обтекание и манипуляции с позиционированием по вертикали тоже не подходит, категорически.
Цитата Сообщение от Asmovr Посмотреть сообщение
Либо по другому: как сделать так, чтобы выровненный float элемент не выезжал на следующий блок.
Так с обтеканием или нет?
Самый топорный способ:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="wrapper">
        <div class="left">
            Задача организации, в особенности же новая модель организационной деятельности влечет за собой процесс внедрения и модернизации направлений прогрессивного развития. Идейные соображения высшего порядка, а также новая модель организационной деятельности обеспечивает широкому кругу (специалистов) участие в формировании дальнейших направлений развития. Товарищи! новая модель организационной деятельности позволяет выполнять важные задания по разработке системы обучения кадров, соответствует насущным потребностям. Идейные соображения высшего порядка, а также рамки и место обучения кадров позволяет оценить значение форм развития. Равным образом рамки и место обучения кадров в значительной степени обуславливает создание существенных финансовых и административных условий. Разнообразный и богатый опыт начало повседневной работы по формированию позиции требуют определения и уточнения новых предложений.
        </div>
        <div class="right">
            Товарищи! консультация с широким активом требуют от нас анализа форм развития. С другой стороны постоянное информационно-пропагандистское обеспечение нашей деятельности требуют от нас анализа новых предложений. Повседневная практика показывает, что постоянный количественный рост и сфера нашей активности играет важную роль в формировании дальнейших направлений развития. Разнообразный и богатый опыт укрепление и развитие структуры позволяет оценить значение модели развития. Таким образом консультация с широким активом требуют определения и уточнения модели развития. Задача организации, в особенности же постоянное информационно-пропагандистское обеспечение нашей деятельности влечет за собой процесс внедрения и модернизации новых предложений.
        </div>
</div>
 
<style>
.wrapper{
    display:table;
    width: 100%;
}
.left{
    display: table-cell;
    text-align: left;
}
.right{
    display: table-cell;
    text-align: right;
}
</style>
0
0 / 0 / 0
Регистрация: 11.04.2015
Сообщений: 11
19.05.2015, 21:07  [ТС] 3
Все получается вперемешку и наезжает друг на друга
0
6 / 6 / 4
Регистрация: 15.05.2015
Сообщений: 75
Записей в блоге: 3
20.05.2015, 09:01 4
Попробуй блокам задать отображение display: inline-block;
0
153 / 126 / 39
Регистрация: 02.05.2012
Сообщений: 573
20.05.2015, 09:45 5
Asmovr, ну не может такое быть... это же таблица, содержимое ячейки должно быть внутри нее. Киньте что у вас там за ссылки. И какой сейчас код.
0
0 / 0 / 0
Регистрация: 11.04.2015
Сообщений: 11
20.05.2015, 12:16  [ТС] 6
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
 
<div class="post_options">
<?php if ( function_exists('yoast_breadcrumb') ) { yoast_breadcrumb('<div id="breadcrumbs" class="breadcrumbs">','</div>'); } ?>
<div class="post_dateblock"><div class="postdate">
<img src="<?php bloginfo('template_url'); ?>/images/date.png" title="Добавлено" /> <?php the_time('F jS, Y') ?> <img src="<?php bloginfo('template_url'); ?>/images/user.png" title="Автор" /> <?php the_author() ?> <?php if (current_user_can('edit_post', $post->ID)) { ?> <a href="<?php echo get_edit_post_link(); } ?>" title="Править"> <img src="<?php bloginfo('template_url'); ?>/images/edit.png" /> </a>
</div></div>
<div class="post_dateblock"><?php if(function_exists('the_ratings')) { the_ratings(); } ?></div>
 
<div class="breadcrumbs"><script type="text/javascript" src="//yastatic.net/share/share.js" charset="utf-8"></script><div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="small" data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki,moimir,lj,gplus" data-yashareTheme="counter"></div></div>
 
</div>
CSS
1
2
3
4
5
6
7
8
.post_options {margin-bottom:0.3em;}
.breadcrumbs {}
.post_dateblock {}
.postdate {
    color: #666666;
    font-family: Arial,Helvetica,Sans-serif;
    font-size: 12px;
}
Пока так, эксперименты откатил. display: inline-block задать пробовал, нет результата.
0
153 / 126 / 39
Регистрация: 02.05.2012
Сообщений: 573
20.05.2015, 12:29 7
Asmovr, и php и js и html вперемешку и без отступов... ох, вырви глаз.
Для начала не совпадает количество открывающихся и закрывающихся тегов, ну возможно это фрагмент, ну да ладно..
Затем структура. Внутри post_options 3 дива: два с классом post_dateblock и один breadcrumbs
И возникает вопрос..
Цитата Сообщение от Asmovr Посмотреть сообщение
дивы нефиксированной ширины по разным краям в одну строку: один по левому, другой по правому краю.
Что куда разносить? Как 3 блока можно один вправо, другой влево в одну строку?
0
Эксперт HTML/CSS
2964 / 2599 / 1068
Регистрация: 15.12.2012
Сообщений: 9,876
Записей в блоге: 11
20.05.2015, 12:41 8

Не по теме:

Цитата Сообщение от Ukkas Посмотреть сообщение
ох, вырви глаз
АТская вёрстка...:D


Если ещё актуален вопрос:
Цитата Сообщение от Asmovr Посмотреть сообщение
Либо по другому: как сделать так, чтобы выровненный float элемент не выезжал на следующий блок.
Вот примерчик:
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<html>
<head>
<title>Гостевая книга</title>
<meta charset="utf-8">
</head>
<style>
.wrapper{
    width: 100%;
}
.left{
    float:left;
    max-width:50%;
    background:red
}
.right{
    float:right;
    max-width:50%;
    background:blue
}
</style>
<div class="wrapper">
        <div class="left">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div class="right">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
</div>
</body>
</html>

Но если Вам до сих пор не подошли варианты Ukkas и kisk мой код смотреть рановато... Там надо серьёзно под себя подпилить и указать правильную ширину, если блока будет три, а не два...
0
0 / 0 / 0
Регистрация: 11.04.2015
Сообщений: 11
21.05.2015, 12:29  [ТС] 9
Не я эту тему верстал, но видимо мне переверстывать. С нуля.
0
Fedor92
21.05.2015, 12:32
  #10

Не по теме:

Цитата Сообщение от Asmovr Посмотреть сообщение
Не я эту тему верстал, но видимо мне переверстывать. С нуля.
А раньше - это как бы непонятно было?:D

0
0 / 0 / 0
Регистрация: 11.04.2015
Сообщений: 11
27.05.2015, 15:01  [ТС] 11
Цитата Сообщение от Fedor92 Посмотреть сообщение
АТская вёрстка...
Пардон, а что именно? Вот так например сейчас устроен файл single.php моего сайта вордпресс:
Кликните здесь для просмотра всего текста
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<?php get_header(); ?>
    <div class="outer" id="contentwrap">    
        <div class="postcont">
            <div id="content">  
            <?php if (have_posts()) : ?>    
            <?php while (have_posts()) : the_post(); ?>
                <div <?php post_class() ?> id="post-<?php the_ID(); ?>">
                    <?php if ( function_exists('yoast_breadcrumb') ) { yoast_breadcrumb('<div id="breadcrumbs" class="breadcrumbs">','</div>'); } ?>
                    <div class="post_options">
 
                        <div class="po_left">
                            <img src="<?php bloginfo('template_url'); ?>/images/date.png" title="Добавлено" /> <?php the_time('F jS, Y') ?>
                            <img src="<?php bloginfo('template_url'); ?>/images/user.png" title="Автор" /> <?php the_author() ?>
                            <?php if (current_user_can('edit_post', $post->ID)) { ?> <a href="<?php echo get_edit_post_link(); } ?>" title="Править"> <img src="<?php bloginfo('template_url'); ?>/images/edit.png" /> </a>
                        </div>
                        
                        <div class="po_center">
                            <?php if(function_exists('the_ratings')) { the_ratings(); } ?>
                        </div>
                        
                        <div class="po_right">
                            <script type="text/javascript" src="//yastatic.net/share/share.js" charset="utf-8"></script><div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="small" data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" data-yashareTheme="counter"></div>
                        </div>
 
                    </div>
                    
                            <div class="postmeta"><div class="po_left"><img src="<?php bloginfo('template_url'); ?>/images/folder.png" /> Опубликовано в рубрике <?php the_category(', ') ?></div><div class="po_right"><?php if(get_the_tags()) { ?> <img src="<?php bloginfo('template_url'); ?>/images/tag.png" /> <?php  the_tags('Метки: ', ', '); } ?></div></div>
 
<!--post-<?php the_ID(); ?>-->
                    <h1 class="single_title"><?php the_title(); ?></h1>
                    
                    <div id="content" class="single_post">
                        <?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(300,225), array("class" => "alignleft <!--post_thumbnail-->")); } ?>
                                <?php the_content($more_link_text = null, $strip_teaser = false); ?>
                                <?php wp_link_pages(array('before' => '<p><strong>Страницы:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
                            </div>
                        
                            <div class="navigation clearfix">
                                <div class="alignleft"><?php previous_post_link('&laquo; %link') ?></div>
                                <div class="alignright"><?php next_post_link('%link &raquo;') ?></div>
                            </div>
                            
    <script type="text/javascript">(function() {
  if (window.pluso)if (typeof window.pluso.start == "function") return;
  if (window.ifpluso==undefined) { window.ifpluso = 1;
    var d = document, s = d.createElement('script'), g = 'getElementsByTagName';
    s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true;
    s.src = ('https:' == window.location.protocol ? 'https' : 'http')  + '://share.pluso.ru/pluso-like.js';
    var h=d[g]('body')[0];
    h.appendChild(s);
  }})();</script>
 
  
<div class="pluso" data-background="#ebebeb" data-options="medium,square,line,horizontal,counter,theme=04" data-services="vkontakte,facebook,twitter,odnoklassniki,moimir,google"></div>
                    
                    </div>
                        
<!--/post-<?php the_ID(); ?>-->
                        
                <?php comments_template(); ?>
                
                <?php endwhile; ?>
            
                <?php endif; ?>
            </div>
            </div>
        <?php get_sidebars(); ?>
    </div>
<?php get_footer(); ?>

Объясните неучу пожалуйста.
0
Эксперт HTML/CSS
2964 / 2599 / 1068
Регистрация: 15.12.2012
Сообщений: 9,876
Записей в блоге: 11
27.05.2015, 15:27 12
Цитата Сообщение от Asmovr Посмотреть сообщение
Объясните неучу пожалуйста.
А чего не понять? Представьте, что Вас просят прочесть книгу, Вы её открываете и видите: половина слов написана на русском, половина на английском и ещё половина на немецком - причём всё вперемешку и изначально не понятно, в каком порядке слова написаны и какой имеют смысл... Вы сможете с ходу разобраться? Если задаёте вопрос по вёрстке выкидываете весь js и php - оставляете только те элементы языка html и css, которые нуждаются в правке... То есть выкладываете только вёрстку без постороннего кода... По крайней мере, если хотите чтобы Вам хоть кто-то помог + формулируйте вопрос максимально точно, особенно, если есть какие-то условия для правки... Надеюсь - это понятно?
0
153 / 126 / 39
Регистрация: 02.05.2012
Сообщений: 573
27.05.2015, 15:48 13
Asmovr, А Вы правда не замечаете разницы?
Да, в этом файле тоже присутствуют 3 языка, но хотя бы не в одной строчке! Что бы код был читаемый, то у открывающего и закрывающего тега должен быть одинаковый отступ, у дочерних элементов отступ больше, что бы была видна структура. А вот, например, по этой строчке не понять что внутри чего находится, сколько тут элементов, кокой из них дочерний, какой нет...

HTML5
1
<div class="breadcrumbs"><script type="text/javascript" src="//yastatic.net/share/share.js" charset="utf-8"></script><div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="small" data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki,moimir,lj,gplus" data-yashareTheme="counter"></div></div>
Ну хотя бы как-то так, было бы понагляднее
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
 
<div class="post_options">
    <?php if ( function_exists('yoast_breadcrumb') ) { yoast_breadcrumb('<div id="breadcrumbs" class="breadcrumbs">','</div>'); } ?>    
        
        <div class="post_dateblock">
            <div class="postdate">
                <img src="<?php bloginfo('template_url'); ?>/images/date.png" title="Добавлено" /> 
                <?php the_time('F jS, Y') ?> 
                <img src="<?php bloginfo('template_url'); ?>/images/user.png" title="Автор" /> 
                <?php the_author() ?> 
                <?php if (current_user_can('edit_post', $post->ID)) { ?> 
                <a href="<?php echo get_edit_post_link(); } ?>" title="Править"> 
                    <img src="<?php bloginfo('template_url'); ?>/images/edit.png" /> 
                </a>
            </div>
        </div>
        
        <div class="post_dateblock">
            <?php if(function_exists('the_ratings')) { the_ratings(); } ?>
        </div>
         
        <div class="breadcrumbs">
            <script type="text/javascript" src="//yastatic.net/share/share.js" charset="utf-8"></script>
            <div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="small" data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki,moimir,lj,gplus" data-yashareTheme="counter"></div>
        </div> 
        
</div>
0
27.05.2015, 15:48
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
27.05.2015, 15:48
Помогаю со студенческими работами здесь

В матрице A(m,n) все ненулевые элементы заменить обратным по величине и противоположным по знаку
1)В матрице A(m,n) все ненулевые элементы заменить обратным по величине и противоположным по знаку...

Найти первые равные элементы массива и заменить их на элемент с противоположным знаком
условие: 1. Дан массив положительных чисел. Среди них есть равные. Найти первые равные элементы...

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

Для каждого положительного элемента определить, есть ли в массиве отрицательный элемент с противоположным з
Позязя. Нужна помощь с решением C: Полное условие. Для каждого положительного элемента определить,...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
13
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru