Question

如何在div中创建一个文本环绕另一个div并且float或inline-block不起作用。这就是我想要的。

                      ________
_____________________|        |_
 Div: text text text |  img   | |
 text test text text |separate| |
 text test text text |   div  | |
 text test text text  --------  |
text test text text text test   |

这就是我所拥有的。

                      ________
_____________________|        |_
 Div: text text text |  img   | |
 text test text text |separate| |
 text test text text |   div  | |
 text test text text  --------  |
text test text text             |
text test text text             |
text test text text             |

Answer 1

这应该非常直截了当。只需浮动import Foundation class PerformCalculations { func add(a: Double, b: Double) -> Double { let result = a + b return result } func division(a: Double, b: Double) -> Double { let result = a / b return result } func subtract(a: Double, b: Double) -> Double { let result = a - b return result } func multiplication(a: Double, b: Double) -> Double { let result = a * b return result } func squareroot(a: Double) -> Double { let result = sqrt(a) return result } }或class TableTableViewController: UITableViewController { var historyArray2: [String] = [] override func viewDidLoad() { super.viewDidLoad() // Uncomment the following line to preserve selection between presentations // self.clearsSelectionOnViewWillAppear = false // Uncomment the following line to display an Edit button in the navigation bar for this view controller. // self.navigationItem.rightBarButtonItem = self.editButtonItem() } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } // MARK: - Table view data source /*override func numberOfSections(in tableView: UITableView) -> Int { // #warning Incomplete implementation, return the number of sections return 0 }*/ /*override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { // #warning Incomplete implementation, return the number of rows return historyArray2.count } override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "History", for: indexPath) cell.textLabel?.text = historyArray2[indexPath.row] return cell }*/ /* // Override to support conditional editing of the table view. override func tableView(_ tableView: UITableView, canEditRowAt indexPath: IndexPath) -> Bool { // Return false if you do not want the specified item to be editable. return true } */ /* // Override to support editing the table view. override func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCellEditingStyle, forRowAt indexPath: IndexPath) { if editingStyle == .delete { // Delete the row from the data source tableView.deleteRows(at: [indexPath], with: .fade) } else if editingStyle == .insert { // Create a new instance of the appropriate class, insert it into the array, and add a new row to the table view } } */ /* // Override to support rearranging the table view. override func tableView(_ tableView: UITableView, moveRowAt fromIndexPath: IndexPath, to: IndexPath) { } */ /* // Override to support conditional rearranging of the table view. override func tableView(_ tableView: UITableView, canMoveRowAt indexPath: IndexPath) -> Bool { // Return false if you do not want the item to be re-orderable. return true } */ /* // MARK: - Navigation // In a storyboard-based application, you will often want to do a little preparation before navigation override func prepare(for segue: UIStoryboardSegue, sender: Any?) { // Get the new view controller using segue.destinationViewController. // Pass the selected object to the new view controller. } */ }并应用否定div。

img

margin

Answer 2

尝试使用Ppadding / margin - 我在这里为我们设置了一个代码笔：

Codepen

<强> HTML

    <div class="one">
  <div class="two">
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR2rju9r765Nbqd7MKVb2EGuAomXXBMqM5pBEhhLFiCnSjuP9R1eLLh5sU"/>
  </div>
  texttexttexttexttexttexttext<br/>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext<br/>texttexttexttexttexttexttexttext<br/>texttexttexttexttexttexttexttexttexttexttexttexttexttext<br/>texttexttexttexttexttexttext
</div>

<强> CSS

.one{
  width:550px;
  height:200px;
  background-color:green;
  margin-top:50px;
  padding-right:100px;
  word-wrap:word-break;
}
.two{
  float:right;
  margin-right:-60px;
  margin-top:-40px;
  margin-left:10px;
}

Answer 3

您可以将它们设为两个单独的div，并将float应用于具有固定宽度和高度的第一个div。那就是：

HTML

<div class="a"></div>
<div class="b">TEXT TEXT TEXT<div>

然后在你的CSS中

.a {
  float: right;
  width: 150px;
  height: 150px;
}

这里是fiddle

如何在div中使用img和text中的div包围另一个div

3 个答案: