在Django的同一行放置文本和圖像

我正在建立一個使用Django的個人網站，並且我有一個應用程序 - 家。在我的主頁上，我想將圖像和文本放在同一行（並排）。我已經嘗試了幾種使用Bootstrap來做到這一點的方法，但是它們都不起作用。以下是我的代碼，文字出現在圖像的正下方，而不是圖像的下一個。在Django的同一行放置文本和圖像

家的template.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>My Website</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <!-- Boostrap --> 
    {% load staticfiles %} 
    <link rel="stylesheet" href="{% static 'home/css/bootstrap.css' %}"> 
    <link rel="stylesheet" href="{% static 'home/css/basic.css' %}"> 

    <!-- Font-Awesome (Icons) --> 
    <script src="https://use.fontawesome.com/8e86dbd2db.js"></script> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 

<body> 
<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">Pranav Gupta</a> 
    </div> 
    <ul class="nav navbar-nav"> 
     {% url 'home:index' as index %} 
     {% url 'home:portfolio' as portfolio %} 
     {% url 'home:blog' as blog %} 
     {% url 'home:contact' as contact %} 
     <li {% if request.path == index %} class="active" {% endif %} ><a href="{% url 'home:index' %}">Home</a></li> 
     <li {% if request.path == portfolio %} class="active" {% endif %} ><a href="{% url 'home:portfolio' %}">Portfolio</a></li> 
     <li {% if request.path == blog %} class="active" {% endif %} ><a href="{% url 'home:blog' %}">Blog</a></li> 
     <li {% if request.path == contact %} class="active" {% endif %} ><a href="{% url 'home:contact' %}">Contact</a></li> 
    </ul> 
    </div> 
</nav> 

    {% block content %} 
    {% endblock %} 

    {% block two %} 
    {% endblock %} 

</body> 
</html>

家的index.html的

{% extends "home/template.html" %} 

<div class="row"> 
    <div class="col-md-6"> 
    {% block content %} 
    {% load static %} 
    <img class="img-responsive center-block" src="{% static "home/img/me.jpg" %}" alt="Me" width="30%" /> 
    {% endblock %} 
    </div> 

    <div class="col-md-6"> 
    {% block two %} 
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex 
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
    {% endblock %} 
    </div> 
</div>

來源

2017-01-19 pranavhgupta

你不應該有任何標記你的孩子外block標籤（index.html的）模板，因爲這將不會呈現。嘗試的行和列的邏輯移動到你的基本模板：

<div class="row"> 
    <div class="col-md-6"> 
     {% block content %} 
     {% endblock %} 
    </div> 
    <div class="col-md-6"> 
     {% block two %} 
     {% endblock %} 
    </div> 
    </div>

這就是說，有更簡單的方法來顯示文本旁邊的圖像，但我懷疑這是與您的網站佈局的一個普遍問題，你會想已經固定在其他頁面上。

來源

2017-01-19 08:43:32

在Django的同一行放置文本和圖像

回答

相關問題