Nano Hash - криптовалюты, майнинг, программирование

отображение более 1 div по горизонтали и просмотр их с помощью горизонтальной полосы прокрутки

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

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

<html>
<head>
<title> Slide </title>
<style type="text/css">
.total
{
height:350px;
width:75%;
border:1px solid black;
margin-left:auto;
margin-right:auto;
margin-top:15%;
}
.slidepanel
{
border:1px solid purple;
width:100%;
height:100%;
overflow-x: scroll;
overflow-y: hidden;
}
.slideleft
{
border:1px solid green;
width:5%;
height:10%; 
margin-left:5%;
float:left;
text-align:center;
//padding-top:1%;
}
.slideright
{
//padding-top:1%;
border:1px solid green;
width:5%;
height:10%; 
margin-left:80%;
float:left;
text-align:center;
}
.box
{
border:1px solid red;
width:100%;
height:100%;
float:left;
margin-left:auto;
margin-right:auto;
}

</style>
</head>
<body>
<div class="total">
<div class="slidepanel">
<button class="slideleft">
 <<
</button>
<button class="slideright">
 >>
 </button>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</div>
</body>
</html>
html css css-float
25.05.2012

Ответы:


1

Да, обернув их оберткой. Как это http://dabblet.com/gist/2787474

25.05.2012
  • Большое спасибо ... очень полезный совет 25.05.2012

    • 2

    Вы указали ширину .box на 100%, поэтому она всегда будет занимать ширину всей страницы, поэтому не останется места для размещения других полей рядом с ней. Сделайте его менее широким, и все заработает.

    http://jsfiddle.net/JDeaZ/

    25.05.2012
  • Я поставил 100% ширины div class = slidepanel, это не займет всю страницу .. Пожалуйста, подскажите, что нужно сделать 25.05.2012
  • @TasneemFathima Я должен был быть более ясным. width: 100% он будет занимать всю ширину своего контейнера. В этом случае .slidepanel содержится в .total, ширина которого составляет всего 75%. Итак, вам нужно изменить ширину .total;) 25.05.2012

    • 3

    Как и предложил @RobinJ, укажите ширину поля.

    Также я бы избавился от поля: auto; так как это будет центрировать ваш div. вы можете использовать, например, margin-left: 10px; маржа справа: 10 пикселей; чтобы дать ему некоторый интервал слева и справа от вашего div.

    Вот так будет выглядеть мой код:

    .box{
    border:1px solid red;
    width: 300px; /*fill in your desired width*/
    height: 300px; /*fill in your desired height*/
    float:left;
    margin-left: 10px;
    margin-right: 10px;
}

    Надеюсь, это поможет ;)

    25.05.2012

    4

    круто, просто несколько советов и простой способ сделать это, работайте с одними и теми же значениями данных, насколько это возможно,% иногда будет разбрасывать элементы в IE, px - это хорошо, 1200 пикселей для ширины - подходит для различных размеров экрана. вот как я бы это сделал.

    HTML

    <div id="box_wrapper">
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
</div>

    CSS

    #box_wrapper {
  height: 400px;
  width: 1200px;
  margin: /*top and bottom*/5px auto/*left and right*/; /*this will keep it centred*/
  overflow-x: scroll;
}
.box {
  float: left;
  width: 1200px;
  height: 398px;
}

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

    вы можете сделать что-нибудь необычное и скрыть переполнение-x, а затем

    #box_wrapper:hover {
 overflow-x: scroll;
}

    надеюсь, что это поможет: D

    25.05.2012
    Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..