Как сделать таблицу адаптивной и выровнять по изображению с помощью начальной загрузки - PullRequest
Новая
       1

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

0 голосов
/ 20 февраля 2019

Мне нужно выровнять часть таблицы на изображении, но я использую загрузчик container, col-md-4, а также мне нужно お知らせ, чтобы быть на вершине при использовании мобильного телефона.

HTML: 

   <div class="container padding" id="temp">
            <div class="row text-center padding">
                <div class="col-md-4">
                    <img src="sbpage/img/img1.png">
                    <div class="txt">
                        <h3>かっこよく<br>
                            しっかり稼げる</h3>
                        <h4>
                            マグロなど一匹あたり約１～２万円で<br>
                            売れるので月収100万円も夢ではあ<br>
                            りません。目指せ年収1000万円！
                        </h4>
                    </div>
                </div>
                <div class="col-md-4">
                    <img src="sbpage/img/img2.png">
                    <div class="txt">
                        <h3>大物釣って<br>
                            家族に自慢！</h3>
                        <h4>
                            自慢できる仕事ってそうそうあるもの<br>
                            ではない、がここにはある！うちの父<br>
                            ちゃんりょうマンやき！そんな声が聞こ<br>
                            えてきそう。
                        </h4>
                    </div>
                </div>
                <div class="col-md-4">
                    <img src="sbpage/img/img3.png"> 
                    <div class="txt">
                        <h3>漁師になるなら<br>
                            土佐が一番！</h3>
                        <h4>
                            日本を代表する漁場といえば、何とい<br>
                            っても言わずと知れた南国土佐。釣っ<br>
                            た魚はおそらくどこにも負けない旨さ<br>
                            のものばかり！土佐の高知は日本一<br>
                            魚がうまい所なのです。
                        </h4>
                    </div>
                </div>
            </div>
        </div>

CSS: 

#temp h3{
    color: #1D2087;
    font-size: 33px;
    margin-top: 55px;
    font-weight: bold;
}

#temp .txt h4{
    color: #1D2087;
    font-size: 15px;
    padding: 1% 0 0 12%;
    font-weight: bold;
    text-align: left;
}

#info{
    background-color: #1D2087;
    font-size: 19px;
    color: white;
    padding: 35px 1% 3% 25px;
    margin-top: 55px;
}

.no1 {
    font-weight: bold;
}

#info tr a{
    color: white;
    padding-left: 25px;
    float: left;
}

#info tr td a:hover{
    color: #ffff00;
}

Выравнивание

Таблица новостей

Ответы [ 3 ]

0 голосов
/ 20 февраля 2019

Надеюсь, это поможет вам.Я только что создал класс для тега <img>. 

.img
{
     height: 30%;
    width: 100%;
}

Показывает выровненное изображение. 

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>
#temp h3{
    color: #1D2087;
    font-size: 33px;
    margin-top: 55px;
    font-weight: bold;
}

#temp .txt h4{
    color: #1D2087;
    font-size: 15px;
    padding: 1% 0 0 12%;
    font-weight: bold;
    text-align: left;
}
.img
{
height: 30%;
    width: 100%;
}
#info{
    background-color: #1D2087;
    font-size: 19px;
    color: white;
    padding: 35px 1% 3% 25px;
    margin-top: 55px;
}

.no1 {
    font-weight: bold;
}

#info tr a{
    color: white;
    padding-left: 25px;
    float: left;
}

#info tr td a:hover{
    color: #ffff00;
}
</style>
</head>
<body>   
<div class="container padding" id="temp">
            <div class="row text-center padding">
                <div class="col-md-4">
                    <img class="img" src="https://i.stack.imgur.com/ac47X.png">
                    <div class="txt">
                        <h3>かっこよ<br>
                            しっかり稼げる</h3>
                        <h4>
                            マグロなど一匹あたり約１～２万円で<br>
                            売れるので月収100万円も夢ではあ<br>
                            りません。目指せ年収1000万円！
                        </h4>
                    </div>
                </div>
                <div class="col-md-4">
                    <img class="img" src="https://i.stack.imgur.com/ac47X.png">
                    <div class="txt">
                         <h3>大物釣って<br>
                            家族に自慢！</h3>
                        <h4>
                            自慢できる仕事ってそうそうあるもの<br>
                            ではない、がここにはある！うちの父<br>
                            ちゃんりょうマンやき！そんな声が聞こ<br>
                            えてきそう。
                        </h4>
                    </div>
                </div>
                <div class="col-md-4">
                    <img class="img" src="https://i.stack.imgur.com/ac47X.png"> 
                    <div class="txt">
                        <h3>漁師になるなら<br>
                            土佐が一番！</h3>
                        <h4>
                            日本を代表する漁場といえば、何とい<br>
                            っても言わずと知れた南国土佐。釣っ<br>
                            た魚はおそらくどこにも負けない旨さ<br>
                            のものばかり！土佐の高知は日本一<br>
                            魚がうまい所なのです。
                        </h4>
                    </div>
                </div>
            </div>
<!--div class="d-flex p-3"-->
<div class="row">
    <div class="col-sm-12" id="info">
      <div class="txt h5 text-xs-center text-sm-center headin" style="text-align:center;">
        <b>お知らせ</b>
      </div>
      <div class="container-fluid">
        <div class="row">
          <div>2019.1.20&nbsp;&nbsp;&nbsp;</div><a href="" class="col-10 text-left p-0">これはテストのための長いリンクです。</a>
        </div>
        <div class="row">
          <div>2019.1.21&nbsp;&nbsp;&nbsp;</div><a href="" class="col-10 text-left p-0">これもまた長いリンクです。</a>
        </div>
      </div>
    </div>
  </div>
        </div>
</body>
</html>

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

Удачи.

0 голосов
/ 20 февраля 2019

Обратите внимание, что я сделал заголовок нижнего колонтитула #info таким, чтобы он был выровнен по левому краю по центру на меньших экранах.изображения также реагируют так, что они не перекрываются на экранах меньшего размера.Изображения выровнены по границам #info.Вот ваш обновленный код: Codepen 

#temp h3 {
  color: #1D2087;
  font-size: 33px;
  margin-top: 55px;
  font-weight: bold;
}

#temp .txt h4 {
  color: #1D2087;
  font-size: 15px;
  padding: 1% 0 0 12%;
  font-weight: bold;
  text-align: left;
}

#info {
  background-color: #1D2087;
  font-size: 19px;
  color: white;
  padding: 35px 1% 3% 25px;
  margin-top: 55px;
}

.no1 {
  font-weight: bold;
}

#info a {
  color: white;
  padding-left: 25px;
  float: left;
  text-decoration: underline;
}

#info a:hover {
  color: #ffff00;
  text-decoration: none;
}

#info .txt {
  height: 2em;
}

.headin {
  text-align: center
}
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>

<body>
  <div class="d-flex pt-4" id="temp">
    <div class="col-md-4">
      <img class="img-fluid" src="https://picsum.photos/900?image=0" alt="">
      <div class="txt text-center">
        <h3>かっこよく<br> しっかり稼げる
        </h3>
        <h4>
          マグロなど一匹あたり約１～２万円で<br> 売れるので月収100万円も夢ではあ
          <br> りません。目指せ年収1000万円！
        </h4>
      </div>
    </div>
    <div class="col-md-4">
      <img class="img-fluid" src="https://picsum.photos/900?image=2" alt="">
      <div class="txt text-center">
        <h3>大物釣って<br> 家族に自慢！
        </h3>
        <h4>
          自慢できる仕事ってそうそうあるもの<br> ではない、がここにはある！うちの父
          <br> ちゃんりょうマンやき！そんな声が聞こ
          <br> えてきそう。
        </h4>
      </div>
    </div>
    <div class="col-md-4">
      <img class="img-fluid" src="https://picsum.photos/900?image=6" alt="">
      <div class="txt text-center">
        <h3>漁師になるなら<br> 土佐が一番！
        </h3>
        <h4>
          日本を代表する漁場といえば、何とい<br> っても言わずと知れた南国土佐。釣っ
          <br> た魚はおそらくどこにも負けない旨さ
          <br> のものばかり！土佐の高知は日本一
          <br> 魚がうまい所なのです。
        </h4>
      </div>
    </div>
  </div>
  <div class="d-flex p-3">
    <div class="col-sm-12" id="info">
      <div class="txt h5 text-xs-center text-sm-center text-md-left headin">
        <b>お知らせ</b>
      </div>
      <div class="container-fluid">
        <div class="row">
          <div>2019.1.20&nbsp;&nbsp;&nbsp;</div><a href="" class="col-10 text-left p-0">これはテストのための長いリンクです。</a>
        </div>
        <div class="row">
          <div>2019.1.21&nbsp;&nbsp;&nbsp;</div><a href="" class="col-10 text-left p-0">これもまた長いリンクです。</a>
        </div>
      </div>
    </div>
  </div>
</body>

101 れ が 立 つ こ と を 願 101 101

平和 ?

0 голосов
/ 20 февраля 2019

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

.col-md-4 img{
    width: 100%;
}

И чтобы ответить на ваш второй вопрос (Таблица новостей), вам нужно показать свою таблицу новостей в своемразметка, чтобы я мог предоставить вам решение.Ура! * * 1004

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...