Блог

Главная - Вопросы по программированию - Как выровнять содержимое, показанное на изображении, с помощью JavaScript вместе с перенаправлением на другую страницу

Как выровнять содержимое, показанное на изображении, с помощью JavaScript вместе с перенаправлением на другую страницу

#javascript #html #css

#javascript #HTML #css — код

Вопрос:

Я немного обеспокоен выравниванием содержимого, как показано на изображении. Наряду с этим мне нужно перенаправить на страницу 1, нажав на раздел содержимого, и перенаправить на страницу 2, щелкнув значок отдельно. Как я могу решить это с помощью JavaScript?

демонстрационное изображение

Комментарии:

1. покажите нам, что вы пробовали

Ответ №1:

Эти вещи могут быть достигнуты без использования JavaScript, кроме того, что обычно плохой практикой является манипулирование DOM с помощью JavaScript, поскольку многое можно сделать с помощью правил css, анимации, базового html. Чтобы выровнять значок, сначала вы должны попробовать эти правила css, применяемые к элементу icon:

 .your-icon {
    top: 0;
    right: 0;
}

Предполагая, что ваш значок в html объявлен следующим образом:

 <img src="foo.img" class="your-icon">

Хотя это зависит от применяемых текущих правил (например, вы должны использовать другой набор правил, если flex включен для родительского элемента). Возможно, задействован интервал с фиксированными значениями между разделами содержимого, который убирает значок с пути (применяются отступы, правила полей?).

Что касается навигации, html href достаточно хорош

Ответ №2:

 .a {
  /*   width:400px; */
  height: 300px;
  border: 1px solid;
}
.b {
  width: 100%;
  float: left;
  /*   border:1px solid red; */
}
.c {
  width: 70%;
  /*   border:1px solid; */
  float: left;
  /*   display:flex; */
  float: left;
  
}
.c div{padding: 5px;}
.d {
  border: 1px solid;
}
.box {
  width: 29%;
  float: left;
  border: 1px solid;
  height: 100%;
}
.rTable {
  display: block;
  width: 100%;
}
.rTableHeading,
.rTableBody,
.rTableFoot,
.rTableRow {
  clear: both;
}
.rTableHead,
.rTableFoot {
  /*    background-color: #DDD; */
  font-weight: bold;
}
.rTableCell,
.rTableHead {
  /*    border: 1px solid #999999; */
  float: left;
  height: 17px;
  overflow: hidden;
  padding: 5px;
  width: 20%;
}
.rTable:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
} 
 <div class='a'>
  <div class='b'>
    <div class='c'>
      <div>Name</div>
      <div>Address</div>
      <div>PIN</div>
    </div>
    <div class='box'>ICON</div>
  </div>
  <div class='d'>
    <div class="rTable">
      <div class="rTableRow">
        <div class="rTableHead"><strong>Time</strong></div>
        <div class="rTableHead"><span style="font-weight: bold;">Duration</span></div>
        <div class="rTableHead"><strong>Amount</strong></div>
        <div class="rTableHead"><strong>Position</strong></div>
      </div>
      <div class="rTableRow">
        <div class="rTableCell">5</div>
        <div class="rTableCell">2</div>
        <div class="rTableCell">3</div>
        <div class="rTableCell">4</div>
      </div>

    </div>
  </div>
</div>