CSS не может плавать влево

0

Привет, я пробовал выделить способы, как исправить это, но я наклоняю float div влево. Когда я создаю div, он автоматически складывается в правый верхний угол, и я не могу его переместить только с заполнением и разметкой.

Мой пример index.php должен плавать: left div с языком класса:

<body class="menu">
    <div class="wrapper">
        <div class="menu-toggle">
            Show menu
        </div>
        <div class="language">
            Select lang
        </div>
        <header>
            <nav class="menu-side">
                <ul>
                    <li><a href="/upload">Home</a></li>
                    <li>Login</li>
                    <li>Contact</li>
                </ul>
            </nav>
        </header>
        <form action="upload.php" method="POST" enctype="multipart/form-data" id="upload" class="upload">
            <fieldset>
                <legend>Upload files</legend>
                <input type="file" id="file" name="file[]" required multiple>
                <input type="submit" id="submit" name="submit" value="Upload">
            </fieldset>

            <div class="bar">
                <span class="bar-fill" id="pb"><span class="bar-fill-text" id="pt"></span></span>
            </div>

            <div id="uploads" class="uploads">
                Uploaded links will apear here.
            </div>
        </form>
    </div>
    <footer>
        Created by Revix  2014
    </footer>
</body>

И мой css:

html, body {    height: 100%;   margin-top: 0; }

body {  font-family: "Georgia", serif; }

.upload {   width:500px;    background: #f0f0f0;    border: 1px solid #ddd;     padding: 20px;  vertical-align: center;     margin-left: auto;  margin-right: auto; }

.upload fieldset {  border: 0;  padding: 0;     margin-bottom: 10px; }

.upload fieldset legend {   font-size: 1.2em;   margin-bottom: 10px; }

footer {    background-color: cornflowerblue;   text-align: center;     vertical-align: middle;     min-width: 542px; }

.wrapper {  min-height: 100%;   margin-bottom: -100px;  clear: both; }

.wrapper:after {    content: "";    display: block; }

.wrapper:after, footer {    height: 100px; }

header {    position: fixed;    margin-left: auto;  margin-right: auto; }

.uploads a, .uploads span {     display: block; }

.bar {  width: 100%;    background: #eee;   padding: 3px;   margin-bottom: 10px;    box-shadow: inset 0 1px 3px rgba(0,0,0,.2);     border-radius: 3px;     box-sizing:border-box; }

.bar-fill {     height: 20px;   display: block;     background: cornflowerblue;     width: 0;   border-radius: 3px;

    -webkit-transition:width 0.8s ease;     -moz-transition:width 0.8s ease;    -o-transition:width 0.8s ease;  transition:width 0.8s ease; }

.bar-fill-text {    color:#fff;     padding: 3px; }

.language {     float: left;    position: absolute;     width: 80px;    padding: 3px; }

Если вы хотите увидеть мой веб-сайт: здесь

Можете ли вы предложить мне, что делать?

  • 0
    Пожалуйста, предоставьте ссылку jsfiddle для этого.
  • 0
    И, пожалуйста, уменьшите это до небольшого примера, который показывает ту же проблему. Материал, который вы разместили, слишком велик и слишком сложен, чтобы легко определить проблему.
Показать ещё 2 комментария
Теги:

4 ответа

1
Лучший ответ

Вы имеете в виду этот эффект? См. Мою демонстрацию.

Вставьте следующий код в jsbin.com. В противном случае нам не будет удобно решать вашу проблему.

http://jsbin.com/yivat/1

Поделиться
  • 0
    да что-то в этом роде :) можешь мне посоветовать, как мне это сделать? но в другую сторону
  • 0
    @Mik Просьба посмотреть код в этой демонстрации, я только изменил CSS из .language
Показать ещё 6 комментариев
1

float: left и position: absolute не работает.

удалить позицию: абсолютный

.language {     float: left;   width: 80px;    padding: 3px; }
Поделиться
  • 0
    Я пытался без позиции, ничего не изменилось.
0

Проверяя эти элементы в моем браузере, у них есть вся position:absolute; атрибута CSS position:absolute; set, который устанавливает их в абсолютном положении внутри окна. Но эти элементы, похоже, не имеют left и top положения, которое устанавливает все элементы в положение окна 0,0, которое является левым верхним углом. Я бы рекомендовал установить положение в относительное position:relative; или определить конкретные позиции для ваших html-элементов.

Поделиться
  • 0
    я пробовал posiotion: относительный и оставленный: px, но в другом разрешении это выглядит по-другому.
0

Плавающий левый элемент с абсолютным позиционированием не будет работать. Попробуйте относительно поплавать или поместить его на свою страницу с вершиной: px left: px;

Поделиться
  • 0
    я попробовал сейчас с левой стороны: px и posiotion: абсолютный / относительный. не помогло ... :(
  • 0
    о, сделал с относительным и слева / сверху, но я другое разрешение, это выглядит иначе.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню