отзывчивый дизайн вывода в размере рабочего стола, а также в браузере мобильного размера в CSS HTML - PullRequest
Новая
       8

отзывчивый дизайн вывода в размере рабочего стола, а также в браузере мобильного размера в CSS HTML

0 голосов
/ 09 июня 2019

Мой вопрос очень прост, хотя он немного длинен, у меня следующий код в jsp.Пожалуйста, помогите мне получить правильный вывод, как показано ниже в css, html. 

 Cart              2

 January 2019      $100

 February 2019     $100
 ----------------------
 Total:            $200

Ниже мой код: 

  <div class="col-25">

  <div class="container1">

  <h4>Cart <span class="price"><b>2</b></span></h4>

  <div class="leftcolumn">//Contains cart January 2019 February 2019 like displayed below     

  <p><span><a href="#"><%out.println(a);}%></a></span></p></div> //prints January 2019 February 2019, end of 
  leftcolumn div , prints like below in desktop

displaying in desktop size browser

НО, когда я изменяю размер браузера для мобильных устройств, он печатается следующим образомдизайн: 

  Cart                2

 January 2019      $100
 February 2019     $100
 ---------------------------------
  Total:           $200

CSS 

.col-25 {
-ms-flex: 25%; /* IE10 */
 flex: 25%;
        }

 .container1 {  // containing div leftcolumn and div rightcolumn 
background-color: #f2f2f2;
padding: 2px 20px 15px 20px;
border: 1px solid lightgrey;
border-radius: 3px;
width:100%;
min-height: 100px;
overflow: hidden;  
}

.leftcolumn { // contains cart January 2019 February 2019
float:left;
display:inline-block;
width: 40%;    
line-height: 2.05;
 }

 .rightcolumn {    // Contains price $ 100 $ 100
float:left;
display:inline-block;
width: -moz-calc(100% - 100px);
width: -webkit-calc(100% - 100px);
width: calc(100% - 100px);
line-height: 1.12;
width: 30%;
margin-left: 40px;
margin-top: 4px;
  }

  hr {  // Horizontal line at last before Total Price line
border: 1px solid lightgrey;
    }

span.price { 
  float: right;
  color: grey;
           }
...